HTML5 является новейшей редакцией, и безусловно, самой интересной из языков гипертекстовой разметки. В этой статье мы собрали потрясающие сниппеты HTML5 кода, для улучшения работы вашего веб-сайта.
Вводные типы URL и email
HTML5 представил новые типы ввода URL и электронной почты. Они позволяют писать более семантически правильный код и делают заполнение формы на мобильных устройствах намного легче, отображая специальные кнопки (например @ или .com) в зависимости от типа ввода.
URL атрибуты в действии:
<input type="url" value="">
А также “email” атрибуты… Пожалуйста, обратите внимание на “pattern” атрибут, о котором мы объясним далее.
<input type="email" pattern="[^ @]*@[^ @]*" value="">
Regexp шаблоны для проверки форм
До HTML5, когда мы использовали формы на веб-сайте, нам нужно было использовать JavaScript для создания фронтовой проверки. Теперь с HTML5 и pattern атрибутом, можно определить обычное выражения шаблона для проверки данных.
Следующим является сниппет для проверки адресов электронной почты:
<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
Это для надежных паролей:
<input title="Минимум 8 знаков, включая минимум одну цифру и одну заглавную букву" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />
И этот для проверки номеров телефона:
<input type="text" required pattern="(+?d[- .]*){7,13}" title="международный или местный номер"/>
Контекстное меню с HTML5
Контекстное HTML5 позволяет добавлять элементы в контекстное меню, которое появляются, когда пользователь нажимает правой кнопкой мыши на вашей странице.
На момент написания этой статьи, элемент contextmenu совместим только с Firefox, так что давайте надеяться, что и другие браузеры скоро к этому присоединятся.
<section contextmenu="mymenu"> <p>Здесь ваше меню</p> </section> <menu type="context" id="mymenu"> <menuitem label="Не копируйте фотографии" 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>
HTML5-видео с Flash резервом
Одна из самых прекрасных новых возможностей HTML5 это, безусловно, его способность воспроизводить видео файлы без запроса на разрешения использовать Flash. Хотя, так как старые браузеры не совместимы с HTML5 видео, вы должны ввести Flash резерв. В следующем примере показано, как вставлять mp4 и ogv видео в HTML5, с Flash резервом для старых браузеров.
<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="Не возможно произвести видео, пожалуйста скачайте его" /> </object> </video>
Автозаполнение с HTML5 datalist
С использованием datalist элемента, HTML5 позволяет вам создавать список данных для автозаполнения поля ввода. Супер полезная штука!
<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>
Скрытые элементы с помощью HTML5
HTML5 представил hidden атрибут, который позволяют скрыть определенный элемент, точно так, как бы вы это сделали в CSS используя display:none
<p hidden>Вы не видите этот текст </p>
Элемент с автофокусом
Атрибут autofocus позволяет принудительно сфокусироваться на определенном элементе. Полезно для поисковых страниц, таких как google.com.
<input autofocus="autofocus" />
HTML5 предварительная загрузка
В основном, предварительная выборка представляет собой простую технику по предварительной выборке и загрузки ресурсов, которые не включены в текущую страницу.
В приведенном ниже примере показывается предварительная выборка изображения:
<link rel="prefetch" href="//www.catswhocode.com/wp-content/uploads/my_image.png">
Воспроизведение аудиофайлов с HTML5
HTML5 может воспроизводить видео, как показано было раньше, и он также может воспроизводить аудио файлы, такие как популярный MP3 формат . В качестве примера, вот вам минималистский, но функциональный аудиоплеер.
<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>
Все эти сниппеты определенно помогут вам в разработке ваших проектов.
