HTML5 сниппеты для улучшения работы веб-сайта

HTML5 является новейшей редакцией, и безусловно, самой интересной из языков гипертекстовой разметки. В этой статье мы собрали потрясающие сниппеты HTML5 кода, для улучшения работы вашего веб-сайта.

Вводные типы URL и email

HTML5 представил новые типы ввода URL и электронной почты. Они позволяют писать более семантически правильный код и делают заполнение формы на мобильных устройствах намного легче, отображая специальные кнопки (например @ или .com) в зависимости от типа ввода.

URL атрибуты в действии:

<input type="url" value="">

1	<input type="url" value="">

А также “email” атрибуты… Пожалуйста, обратите внимание на “pattern” атрибут, о котором мы объясним далее.

<input type="email" pattern="[^ @]*@[^ @]*" value="">

1	<input type="email" pattern="[^ @]@[^ @]" value="">

Regexp шаблоны для проверки форм

До HTML5, когда мы использовали формы на веб-сайте, нам нужно было использовать JavaScript для создания фронтовой проверки. Теперь с HTML5 и pattern атрибутом, можно определить обычное выражения шаблона для проверки данных.

Следующим является сниппет для проверки адресов электронной почты:

<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">

1	<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 />

1	<input title="Минимум 8 знаков, включая минимум одну цифру и одну заглавную букву" type="text" pattern="(?=.d)(?=.[a-z])(?=.*[A-Z]).{8,}" required />

И этот для проверки номеров телефона:

<input type="text" required pattern="(+?d[- .]*){7,13}" title="международный или местный номер"/>

1	<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 = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem>
</menu>
</menu>

<p>Здесь ваше меню</p>

</section>

</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>

<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>

</datalist>

Скрытые элементы с помощью HTML5

HTML5 представил hidden атрибут, который позволяют скрыть определенный элемент, точно так, как бы вы это сделали в CSS используя display:none

<p hidden>Вы не видите этот текст </p>

1	<p hidden>Вы не видите этот текст </p>

Элемент с автофокусом

Атрибут autofocus позволяет принудительно сфокусироваться на определенном элементе. Полезно для поисковых страниц, таких как google.com.

<input autofocus="autofocus" />

1	<input autofocus="autofocus" />

HTML5 предварительная загрузка

В основном, предварительная выборка представляет собой простую технику по предварительной выборке и загрузки ресурсов, которые не включены в текущую страницу.

В приведенном ниже примере показывается предварительная выборка изображения:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

1	<link rel="prefetch" href="http://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>

<div>

<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>

Все эти сниппеты определенно помогут вам в разработке ваших проектов. Дополнительно вы можете узнать о 8 новых сниппетах для HTML5 и CSS3 в нашей новой статье – 8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов