Новые элементы HTML5, способные поднять ваш вебсайт на новый уровень

Фрагменты кода HTML5

От автора: HTML5 – самая новая версия языка HTML, и общепризнанно самая интересная. В этой статье я выбрал новые элементы HTML5, способные поднять ваш вебсайт на новый уровень.

Поля ввода Url’а и электронной почты

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

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

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

А также атрибут email. Также, пожалуйста, обратите внимание на атрибут pattern, о котором я буду писать ниже.

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

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

Шаблоны regexp для валидации форм

До появления 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”у. На следующем примере видно, как вставить в HTML5 видео mp4 и ogv, применив альтернативу 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&amp;image=__POSTER__.JPG&amp;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" />

Источник: http://davidwalsh.name/autofocus

Предварительная выборка в HTML5

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

Нижеприведенный пример показывает предварительную выборку изображения:

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

Источник: http://www.catswhocode.com/blog/mastering-html5-prefetching

Проигрывание аудиофайлов с помощью 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>

Источник: http://www.catswhocode.com/blog/mastering-the-html5-audio-property

На этом, урок знакомящий вас с новыми элементами html5, окончен, надеюсь вам понравилось, до скорых встреч.

Автор: Jean-Baptiste Jung

Источник: http://www.catswhocode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. валерий

    Видео HTML5 с альтернативой Flash’у.
    убил весь день на это «порося» и окромя самой оболочки плейера на странице моего блога
    http://spainyribalka.blogspot.com.es/p/blog-page_8282.html
    не добился ни…
    а плейер поставить всё одно нужно. так что помогайте кто может и знает. куда там и что прописывать? это я о ссылках на видео и с этими форматами видео OGV; MP4; SWF;. вродебы прописывал все поправки так как советует здесь, этот чувак http://camendesign.com/code/video_for_everybody
    - не, не и-д-ё-т!

  2. адениум

    Самые красивые Цветы автору!!! все очень классно и красиво спасибо за полезную статью

  3. Albinka

    Горячо приветствую. Пишите побольше таких статей как Новые элементы HTML5, способные поднять ваш вебсайт на новый уровень очень понравилась данная статья.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree