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

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

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


Колонки для телефона
Слушайте музыку в душе и отвечайте на звонки с помощью Bluetooth колонки
beatstop.ru
Банкротство должника
Банкротство! Успешно ведем проекты любой сложности! Четко соблюдаем сроки
anti-dolgi.ru
Лодочные моторы
Продажа лодочных моторов, запчасти, запчасти для снегоходов, ремонт
jet-khv.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31