Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. HTML5 сниппеты для улучшения работы веб-сайта

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

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&amp;image=__POSTER__.JPG&amp;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>


Все эти сниппеты определенно помогут вам в разработке ваших проектов. 

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2025 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний