Веб-программист
0,1
рейтинг
18 марта 2013 в 15:36

Разработка → Полезные сниппеты на HTML5 перевод

HTML*
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях


Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!
<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>


Поля ввода email, url и tel


В HTML5 появилось множество новых типов для полей ввода, и среди них email, url и tel. Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и .com) при заполнении этих полей.
<input type="url">
<input type="email">
<input type="tel">


Шаблоны на соответствие полей формы регулярному выражению


Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом pattern, вы можете просто указать регулярное выражение, которому должны соответствовать вводимые данные!
<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  title="Не менее восьми символов, содержащих хотя бы одну цифру и символы из верхнего и нижнего регистра">
<input type="tel" pattern="(\+?\d[- .]*){7,13}" title="Международный, государственный или местный телефонный номер">


Кастомное контекстное меню


HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).
На момент написания статьи, элемент ContextMenu совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.
<section contextmenu="mymenu"> 
<p>Да, можно кликнуть правой кнопкой прямо здесь.</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Пожалуйста, не воруйте наши изображения" icon="img/forbidden.png"></menuitem>
  <menu label="Социальные сети">
  <menuitem label="Поделиться на FaceBook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>


Видео на HTML5, с резервным Flash-проигрывателем.


Одна из самых больших новых возможностей HTML5, безусловно, его способность воспроизводить видео без использования Flash. Но для старых браузеров, не совместимых с HTML5, вы должны реализовать флэш-проигрыватель, как запасной вариант. В следующем примере показано, как вставить mp4 и ogv видео в HTML5, с резервным проигрывателем для старых браузеров.
<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="Нет возможности воспроизведения видео в вашем браузере">
	</object>
</video>


Скрытые элементы в HTML5


В HTML5 появился атрибут hidden, который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none.
<p hidden>Вы не увидите этот текст</p>


Автофокус для текстовых полей


Аттрибут autofocus позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.
<input autofocus="autofocus">


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


Jean-Baptiste Jung написал подробную статью о предварительной загрузке в 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>
Перевод: Jean-Baptiste Jung
Илья Агафонов @Tairesh
карма
52,2
рейтинг 0,1
Веб-программист
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (27)

  • +3
    Просится перечень браузеров, где эти вещи поддерживаются
    • +16
      Пожалуйста.
  • +3
    Похожая статья: habrahabr.ru/post/153613/
    Подробнее про prefetch habrahabr.ru/post/151197/
  • +2
    Вот тут — htmlbook.ru/html5 можно найти все в более развернутом варианте.
    Да и более интересные вещи там тоже описаны.
  • +1
    Судя по поддержке, таки 10 ИЕ вполне себе браузер :)

    Не понял полезности «Кастомное контекстное меню» нет вещь конечно хорошая, но поддержка only firefox, да ещё и хромающая… хотя надеюсь это лишь временно.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    <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>
    
    А вот я бы опасался иметь два таких элемента, у которых id одного идентичен name другого…
    • 0
      What?? Может тогда еще опасаться одинаковый for / id у label / input ?=)
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Не знал)) значит везло, раз не сталкивался с такой проблемой)
          • +2
            О_о даже я (93-го года рождения) с ней сталкивался!
          • +1
            С какой проблемой? Чёртово НЛО скрывает самое интересное)))
  • 0
    Для datalist есть классный аналог в Bootstrap.
    • 0
      Та практически для всего есть классные аналоги. Особо убого выглядят стандартные поля для ввода даты. Уж лучше прикрутить JS календарик, который и в дизайн будет нормально вписываться, и выглядеть везде одинаково будет.
      • 0
        Это да. Но самое наболевшее — загрузка файлов :)
        • 0
          Ну так вот же ж
          • +1
            Произвольный вид во всех браузерах — это замечательно. А вот поддержка загрузки нескольких файлов, да ещё и по частям — с этим уже проблема (в нативном исполнение конечно же).
            • 0
              А, об этом. Согласен, упарило напрочь крайне раздражает. Нативная поддержка всеми браузерами мультиаплоада была бы крайне кстати.
    • 0
      Вы не поверите, но таких аналогов куча. Но это не совсем аналоги, так как из подобных плагинов и взята идея автодополнения. А datalist это реализация на чистом HTML.
      • +1
        Асолютно согласен. Я просто поделился решением, которое визуально работает очень схоже, при этом уже сейчас во всех браузерах (IE7+). Да ещё и более кастомизируемое. А то что datalist — это нативный HTML, а Bootstarp Typeahead — нет, это я понимаю.
  • +1
    Про <audio> стоит заметить, что mp3 не поддерживается в FF и Опере (то есть приведенный в посте код не соответствует табличке соответствия). И ни один формат не поддерживается сразу во всех популярных браузерах (табличка). Так что либо backoff на Flash в FF (при использовании mp3), либо конвертация аудио в пару форматов.
  • 0
    Если какая то фича не поддерживается во ВСЕХ браузерах, включая распространенные старые Internet Explorer-ы, то для большинства проектов, применять ее нельзя. А судя по красным ячейкам в приведенных табличках, большинство этих функций бесполезны :-(

    Было бы интересно узнать, не какие из фич теоретически существуют, а какие реально одинаково работают во всех распространенных бреузерах, и какие могут эмулироваться библиотеками типа modernizer.
    • +3
      Многие фичи в html5 опциональны (и специально так спроектированы) — пользователи новых браузеров получат большее удобство, пользователи старых не потеряют возможность пользоваться даже без особых стараний фронтендера. Скажем input с type=«email/url» и required станет простым input (text по дефолту), а валидировать на сервере все равно нужно, поэтому на отдельную клиентскую валидацию можно забить — старые получат ошибку от сервера, новые от браузера, а на ошибки от JS можно забить
      • +1
        И после этого я получаю от заказчика следующее:
        — Клиентская валидация под браузером А вообще не работает!
        — Инвалидное поле под браузером В выглядит не так, как под браузером С!
        — Исправляйте эти баги, и учитесь писать кроссбраузерный код!


        Обидно!

        Так что, пока эти фичи не поддерживаются везде и одинаково, я буду реализовывать такой функционал вручную. Что касается той же валидации, то это не отнимает много сил. Добавляем пользовательские атрибуты, типа
        <input type="text" data-validator="email" data-invalid-message="Некорректный email" data-required="yes" />
        А потом пишем буквально несколько строчек на jQuery, которые при сабмите любой формы ищут эти атрибуты и делают проверку. Будет работать везде, одинаково, и я не получу упрек в низком профессионализме и неумении поддерживать все браузеры.
        • 0
          Обидно, конечно. Но такие вопросы нужно согласовывать с заказчиком до разработки: список поддерживаемых браузеров и степень их поддержки.

          Это плагин какой-то? У знакомых немного другой синтаксис. А чисто на JS не уложиться, по-моему, в несколько строк.
          • 0
            При согласовании список поддерживаемых браузеров звучит как «Все распространенные на данный момент браузеры».

            Я имел ввиду, если самому реализовывать. В простейшем случае можно написать что то типа того:
            // При сабмите любой формы
            $('form').submit(function(){ 
                var valid = true;
                // Пробежаться по всем полям
                $('input', this).each(function(){ 
                    $(this).removeClass('invalid'); 
                    // Если есть специальный аттрибут, то проверить условие
                    if($(this).attr('data-requered') == 'yes' && (this).val() == '') {
                        // Помечаем поле как инвалидное, может быть еще alert-ом ругаемся
                        $(this).addClass('invalid'); 
                        ...
                        valid = false;            
                    }        
                    // Другие валидаторы, например через RegExp, минимальная длинна, пользовательская функция, совпадение с другим полем (для паролей) и т.п.
                    if(...) {
                    ...
                    }
                });    
                return vaild;
            });
            

            Но уверен что есть куча готовых плагинов, включая такие, которые эмулируют неработающие фичи HTML5 в текущем брузере.
  • 0
    Datalist очень разочаровал отсутствием каких-либо особенных для этого элемента методов. Например, о динамическом автозаполнении (jQuery.ui.autocomplete или Bootstrap jQuery.typeahead) при помощи аякса можно забыть.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.