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

Проектирование для свободных состояний Проектирование для свободных состояний
Постоянная борьба за посещаемость сайта Постоянная борьба за посещаемость сайта

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

В HTML5 были добавлены новые типы данных для форм. Теперь для адресов сайтов и email можно использовать соответствующие типы полей: url и email. С их помощью можно создавать не только более правильный семантический код, но и упростить процесс проверки введенных пользователем данных.

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

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

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

HTML5 аудио и видео и никакого Flash
Одной из главных возможностей нового стандарта стал отказ от использования 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>

Подсказки для полей на основе datalist
Используя новый элемент datalist можно создать список подсказок для любого поля.

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

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

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

Автофокус на элементе
Атрибут autofocus устанавливает фокус на любой элемент. Удобно использовать для форм поиска.

<input autofocus="autofocus">

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

<link rel="prefetch" href="/uploads/images/doc/designing-for-the-empty-states.jpg">

Контакты Оставьте нам сообщение

Пожалуйста, не стесняйтесь задавать вопросы. Наши сотрудники ответят на ваше сообщение как можно быстрее.

Адрес

Беларусь, г. Гомель, ул. Сосновая 20

Телефон

+375 44 707-61-24

Email

info@reimax.ru

Написать сообщение Заполнить нужно все поля формы

обновить