HTML5-фрагменты кода, чтобы поднять ваш сайт на новый уровень

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

Типы ввода URL и электронной почты

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

Вот urlатрибут в действии:

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

И emailатрибут тоже. Также обратите внимание на patternатрибут, как я объясню ниже.

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

Источник: http://davidwalsh.name/html5-email

Шаблоны регулярных выражений для проверки формы

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

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

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

Это для надежных паролей:

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

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

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

Источник: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Контекстные меню с HTML5

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

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

Источник / Демо: http://speckyboy.com/2013/02/13/quick-tip-the-html5…

HTML5 видео, с резервным Flash

Одна из величайших новых возможностей HTML5, безусловно, заключается в его способности воспроизводить видеофайлы без запроса использования Flash. Хотя старые браузеры несовместимы с HTML5-видео, вы должны использовать Flash-откат. Следующий пример показывает , как вставлять mp4и ogvвидео в HTML5, с флэш — запасным вариантом для старых браузеров.

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

Источник: http://camendesign.com/code/video_for_everybody

Автозаполнение с HTML5 даталистами

Используя этот 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>

Источник / Демо: http://davidwalsh.name/datalist

Скрытые элементы с использованием HTML5

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

<p hidden>You can't see this text</p>

Источник: http://html5demos.com/hidden

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

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

<input autofocus="autofocus" />

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

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