801 На сегодняшний день HTML5 является одним из самых интересных и познавательных языков. Поэтому мы собрали для вас самые невероятные и полезные сниппеты, которые поднимут ваши сайты на следующий уровень.
Поля ввода с типами Url и Email
В HTML5 введены новые типы полей ввода: url и email. Новые типы позволяют писать более правильный и простой HTML код. Отметим, что отображение таких полей на мобильных устройствах уже поддерживается с помощью дополнительных специальных кнопок (таких, как @ или .com).
Далее пример с атрибутом url:
|
1 |
<input type="url" value=""> |
Также присутствует пример с атрибутом email. Обратите внимание на атрибут pattern (о нем подробнее ниже).
|
1 |
<input type="email" pattern="[^ @]*@[^ @]*" value=""> |
Источник:
Шаблоны Regexp для форм валидации
Раньше, если вам нужна были проверка данных на стороне клиента при отправке форм, то вы писали JavaScript код. Но сейчас с HTML5 вам нужен лишь атрибут pattern, с помощью которого вы будете задавать шаблоны регулярных выржений для проверки данных.
С помощью следующего сниппета мы будет проверять правильность ввода email адреса:
|
1 |
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /> |
Вот еще один для проверки сложного пароля:
|
1 |
<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 /> |
А вот еще один для проверки номера телефона:
|
1 |
<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/> |
Источник:
Контекстные меню на HTML5
Контекстное меню HTML5 позволяет вам добавлять элементы к контекстному меню, вызываемому с помощью правой кнопки мыши.
В данный момент времени поддержка элемента contextmenu была только в Firefox, так что ждем, когда среагируют остальные браузеры, а пока смотрим пример реализации.
|
1 2 3 4 5 6 7 8 9 10 |
<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 с обратной поддержкой во Flash
Одной из самых замечательных особеностей в HTML5 — это проигрывание видео-файлов без использования Flash. Но так как в старых браузерах нет поддержки стандарта HTML5, то в сниппет встроена обратная поддержка Flash. В следующем примере реализован показ файла mp4 и ogv.
|
1 2 3 4 5 6 7 8 9 10 |
<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&image=__POSTER__.JPG&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 datalists
Используя элемент datalist, можно создавать список данных для автозавершения полей ввода. Очень полезный код!
|
1 2 3 4 5 6 7 8 9 |
<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.
|
1 |
<p hidden>You can't see this text</p> |
Источник:
Элемент с автофокусом
Атрибут autofocus позволяет принудительно ставить фокус на выбранном элементе. Это очень полезный код, например, для поисковых страниц.
|
1 |
<input autofocus="autofocus" /> |
Источник:
Предварительная выборка в HTML5
Эта техника позволяет предварительно загружать элементы, которые в текущую страницу не включены.
Вот пример предварительной загрузки изображения:
|
1 |
<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png"> |
Источник:
Проигрывание аудио на HTML5
HTML5 проигрывает не только видео, но и аудио-файлы, например, такого популярного формата, как mp3. Далее пример минималистичного, но функционального аудио-плеера.
|
1 2 3 4 5 6 7 |
<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> |
Источник:
