Datalist
Новый элемент >datalist позволяет вам скрестить обычный элемент input с элементом select. С помощью атрибута >list вы можете сопоставить с полем формы список опций (рис. 4.02):
>
>>list="planets">
>
>
>
>
>
>
>
>
>
>
>Рис. 4.02. Новый элемент datalist
Это позволяет юзерам выбрать опцию из приготовленного списка или ввести значение, которого в списке нет. Это очень полезно для ситуаций, которые обычно требуют отдельного поля в форме, озаглавленного: «если вы выбрали вариант “другое”, пожалуйста, укажите…» (рис. 4.03).
>Рис. 4.03. Элемент datalist: показано, что юзер может ввести значение, которого нет в списке
Элемент >datalist – отличное, ненавязчивое дополнение к полю формы. Если браузер не поддерживает >datalist, то поле ведет себя как обычное поле ввода.
Типы полей ввода
В HTML5 стало намного больше вариантов атрибута >type элемента >input. Здесь нужно заасфальтировать столько тропок, что это похоже на строительные работы после того, как по лесу в панике пробежала толпа дачников.
Поиск
Элемент >input со значением “search” в атрибуте >type будет вести себя примерно так же, как элемент ввода со значением “text” атрибута >type:
>
>
Единственная разница между “text” и “search” состоит в том, что браузер может отображать поле для поиска иначе для того, чтобы соответствовать стилю полей поиска в операционной системе. Именно так делает Safari (рис. 4.04).
>Рис. 4.04. Safari устанавливает стили полей поиска в соответствии с Mac OS
Контакты
В HTML5 добавилось три новых типа type для особенных типов контактов: e-mail-адресов, веб-сайтов и номеров телефонов:
>
>type="email">
>
>type="url">
>
>type="tel">
И снова эти поля будут вести себя так же, как текстовые поля ввода, но у браузеров будет чуть больше информации о том, какой именно тип данных ожидается в этом поле.
Разработчики Safari уверяют, что их браузер поддерживает эти новые типы ввода, но при быстром взгляде на форму в десктоп-браузере не видно никаких различий с простым использованием >type="text". Однако, если вы начнете работать с этой же формой в Mobile Safari, различия станут очевидными. Браузер показывает разные экранные клавиатуры в зависимости от значения атрибута >type (рис. 4.05).
Тонко сделано, Webkit, тонко.
>Рис. 4.05. Mobile Safari показывает разные экранные клавиатуры в зависимости от значения атрибута type
Ползунки
Большое количество JavaScript-библиотек предлагают набор виджетов, которые можно использовать в веб-приложениях. Они отлично работают – пока включен JavaScript. Было бы прекрасно, если бы пользователям не приходилось скачивать JavaScript-файл каждый раз, когда мы хотим добавить интересный элемент управления на нашу страницу.