Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

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 = 'http://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="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>


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

20 марта 2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".