От автора: HTML5 – самая новая версия языка HTML, и общепризнанно самая интересная. В этой статье я выбрал новые элементы HTML5, способные поднять ваш вебсайт на новый уровень.
Поля ввода Url’а и электронной почты
HTML5 представил новые типы ввода данных, среди которых url и электронная почта email. Они дают нам возможность писать более семантически правильный код и облегчить заполнение формы на мобильных устройствах путем отображения специальных кнопок (вроде кнопок @ или .com) в зависимости от типа ввода данных.
Вот атрибут url в действии:
|
1 |
<input type="url" value=""> |
А также атрибут email. Также, пожалуйста, обратите внимание на атрибут pattern, о котором я буду писать ниже.
|
1 |
<input type="email" pattern="[^ @]*@[^ @]*" value=""> |
Источник: //davidwalsh.name/html5-email
Шаблоны regexp для валидации форм
До появления HTML5 при использовании в своем вебсайте формы вам приходилось применять JavaScript для создания системной валидации. Теперь с помощью HTML5 и атрибута pattern можно назначить для валидации данных шаблон регулярного выражения.
Для валидации адресов электронной почты используется следующий фрагмент кода:
|
1 |
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /> |
Этот – для надежных паролей:
|
1 |
<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required /> |
А этот – для валидации телефонных номеров:
|
1 |
<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/> |
Источник: //blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/
Контекстные меню в HTML5
Контекстные меню HTML5 дают вам возможность добавлять элементы в контекстное меню, появляющееся, когда пользователь щелкает правой кнопкой мыши где-нибудь на вашей странице.
На время написания этой статьи элемент contextmenu совместим только с Firefox, поэтому будем надеяться, что остальные браузеры вскоре тоже станут его применять.
|
1 2 3 4 5 6 7 8 9 10 |
<section contextmenu="mymenu"> <p>Yes, this section right here</p> </section> <menu type="context" id="mymenu"> <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem> <menu label="Social Networks"> <menuitem label="Share on Facebook*" onclick="window.location.href = '//facebook.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem> </menu> </menu> |
Источник/Демоверсия: //speckyboy.com/2013/02/13/quick-tip-the-html5
Видео HTML5 с альтернативой Flash’у
Одна из грандиозных новых возможностей HTML5, определенно, его способность проигрывать видео-файлы без нужды в применении Flash’а. Хотя, так как более старые браузеры несовместимы с видео HTML5, вам нужно обеспечить альтернативу Flash”у. На следующем примере видно, как вставить в HTML5 видео mp4 и ogv, применив альтернативу Flash’у для более старых браузеров.
|
1 2 3 4 5 6 7 8 9 10 |
<video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> |
Источник: //camendesign.com/code/video_for_everybody
Автозаполнение в HTML5 с помощью списка данных
При помощи элемента datalist HTML5 дает возможность создавать список данных для автозаполнения поля ввода. Очень удобно!
|
1 2 3 4 5 6 7 8 9 |
<input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist> |
Источник/Демоверсия: //davidwalsh.name/datalist
Скрытые элементы и использование HTML5
HTML5 представляет атрибут hidden, позволяющий скрыть отдельный элемент, как вы это сделали бы в CSS с помощью display:none.
|
1 |
<p hidden>You can't see this text</p> |
Источник: //html5demos.com/hidden
Элемент с автофокусом
Атрибут autofocus позволяет создать фокус на отдельном элементе. Полезно для поисковиков, таких как домашняя страница google.com.
|
1 |
<input autofocus="autofocus" /> |
Источник: //davidwalsh.name/autofocus
Предварительная выборка в HTML5
Некоторое время назад я написал подробную статью о предварительной выборке в HTML5. В общем это – простая методика выбора и загрузки ресурса, не включенного в текущую страницу.
Нижеприведенный пример показывает предварительную выборку изображения:
|
1 |
<link rel="prefetch" href="//www.catswhocode.com/wp-content/uploads/my_image.png"> |
Источник: //www.catswhocode.com/blog/mastering-html5-prefetching
Проигрывание аудиофайлов с помощью HTML5
HTML5 может проигрывать видео, как мы уже убедились и, конечно, так же может проигрывать аудиофайлы, такие как популярный формат mp3. В качестве примера здесь приведен минималистичный, но функционирующий аудиоплеер.
|
1 2 3 4 5 6 7 |
<audio id="player" src="sound.mp3"></audio> <div> <button onclick="document.getElementById('player').play()">Play</button> <button onclick="document.getElementById('player').pause()">Pause</button> <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button> <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button> </div> |
Источник: //www.catswhocode.com/blog/mastering-the-html5-audio-property
На этом, урок знакомящий вас с новыми элементами html5, окончен, надеюсь вам понравилось, до скорых встреч.
Автор: Jean-Baptiste Jung
Источник: //www.catswhocode.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (3)