—»     —»   HTML5-сниппеты для усовершенствования вашего сайта
  Раздел: Скрипты и коды   Комментариев: 6  

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

HTML5 представляет собой новую – и к тому же самую интересную – версию Hyper Text Markup Language (Язык гипертекстовой разметки). В нашей сегодняшней статье мы хотим предложить вам несколько невероятных HTML5-сниппетов для усовершенствования вашего сайта.

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

Типы ввода Url и email

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

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

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

А также атрибут email. Также обратите внимание на атрибут pattern, так как мы расскажем о нем позже.

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

Паттерны регулярных выражений для валидации формы

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

Следующий сниппет предназначен для валидации введенного email-адреса:

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

Контекстное меню на 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>

HTML5 video с запасным вариантом на 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="No video playback capabilities, please download the video below" />
</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>You can't see this text</p>

Элемент с автоматическим переходом курсора

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

<input autofocus="autofocus" />

Предварительная загрузка на HTML5

Недавно в интернете выходила целая статья, посвященная предварительному извлечению данных при помощи 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>
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 16163   |   Оставлено комментариев: 6
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 марта 2013 @ 13:47
Написал: SILVER-net — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Статью то стащили http://2web-master.ru/snippety-html5-podnimayushhie-vash-sajt-na-sleduyushhij-ur
oven.html
Комментарий #2: 27 марта 2013 @ 14:01
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3310   |   Комментариев: 500
ICQ: --- не указано ---
SILVER-net, мы никогда и ничего у никого не стаскиваем. У нас есть свои переводчики, которые работают по огромному количеству материала. И если какой-то ресурс также переводит статьи, то это никак не означает того, что мы что-то стащили.
Комментарий #3: 27 марта 2013 @ 22:55
Написал: SILVER-net — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy,
без ссылки на источник, как раз это и означает. wink
Особенно забавно, что недавно Вы сами на сайте публиковали негодование по поводу кражи контента с вашего сайта другим ресурсом. Если следовать вашей логике -
У нас есть свои переводчики, которые работают по огромному количеству материала. И если какой-то ресурс также переводит статьи, то это никак не означает того, что мы что-то стащили.

то тот ресурс тоже может так сказать.
Комментарий #4: 27 марта 2013 @ 23:22
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3310   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: SILVER-net
без ссылки на источник, как раз это и означает
Ну вы хотя бы для начала посмотрите внимательно вокруг поста - есть ссылка или нет. Потом уже пишите что-то.
У нас все переводные посты имеют ссылку. Выньте любую статью из кэша Гугла и посмотрите.
Комментарий #5: 28 марта 2013 @ 06:57
Написал: SILVER-net — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Как раз ссылку искал прежде чем писать коммент, так и не нашел. Сейчас нашел, или добавили или она таким мелким шрифтом написана, что можно только с лупой разглядеть. Вчера после прочтения так и не нашел ссылку на источник, хотя искал, так как сразу вспомнил на каком сайте уже читал данную статью.
Комментарий #6: 28 марта 2013 @ 11:44
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3310   |   Комментариев: 500
ICQ: --- не указано ---
SILVER-net, ну, значит, невнимательно искали.... что я еще вам могу сказать...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Тушенка мелкий опт
Калининградская тушенка оптом от завода со склада в Москве. Выгодные цены
tyshenka-voiskovoy-specrezerv.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Купить тушенку
Качественные консервы по выгодной цене от завода АРГО! 100 видов! Доставка!
argomagazin.ru
Как уменьшить ндс
Смотрите видео на сайте, как уменьшить НДС законно
ndsb2b.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2020    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
242526272829