HTML5 для веб-дизайнеров

Джереми Кит

Если вы хотите, чтобы в ваших формах было два варианта автозаполнения, это тоже возможно. Если вы хотите, чтобы предварительное заполнение было включено в форме, но отключено для одного-двух полей, можно сделать так:

<input type="text" name="onetimetoken" autocomplete="off">

Никакого запасного варианта на JavaScript для браузеров, которые не поддерживают атрибут

autocomplete

, нет. В этом случае новый атрибут HTML5 дополняет существующее поведение браузеров, а не заменяет решение на JavaScript.

Возможность отключать автозаполнение в браузерах может

показаться странным дополнением к спецификации HTML5. HTML5 предназначен для того, чтобы закрепить превалирующие решения, и в данном случае это не очень типичный пример. Но учитывая потенциальные риски безопасности, которые связаны с автоматическим заполнением форм, имеет смысл дать владельцам сайтов возможность переопределить именно эту функцию браузера.

Datalist

Новый элемент

datalist

позволяет вам скрестить обычный элемент input с элементом select. С помощью атрибута

list

вы можете сопоставить с полем формы список опций (рис. 4.02):

<label for="homeworld">Ваша родная планета</label>

<input type="text" name="homeworld" id="homeworld"

list="planets">

<datalist id="planets">

<option value="Меркурий">

<option value="Венера">

<option value="Земля">

<option value="Марс">

<option value="Юпитер">

<option value="Сатурн">

<option value="Уран">

<option value="Нептун">

</datalist>

^{Рис. 4.02. Новый элемент datalist}

Это позволяет юзерам выбрать опцию из приготовленного списка или ввести значение, которого в списке нет. Это очень полезно для ситуаций, которые обычно требуют отдельного поля в форме, озаглавленного: «если вы выбрали вариант “другое”, пожалуйста, укажите…» (рис. 4.03).

^{Рис. 4.03. Элемент datalist: показано, что юзер может ввести значение, которого нет в списке}

Элемент

datalist

– отличное, ненавязчивое дополнение к полю формы. Если браузер не поддерживает

datalist

, то поле ведет себя как обычное поле ввода.

Типы полей ввода

В HTML5 стало намного больше вариантов атрибута

type

элемента

input

. Здесь нужно заасфальтировать столько тропок, что это похоже на строительные работы после того, как по лесу в панике пробежала толпа дачников.

Поиск

Элемент

input

со значением “search” в атрибуте

type

будет вести себя примерно так же, как элемент ввода со значением “text” атрибута

type

:

<label for="query">Поиск</label>

<input id="query" name="query" type="search">

Единственная

разница между “text” и “search” состоит в том, что браузер может отображать поле для поиска иначе для того, чтобы соответствовать стилю полей поиска в операционной системе. Именно так делает Safari (рис. 4.04).

^{Рис. 4.04. Safari устанавливает стили полей поиска в соответствии с Mac OS}

Контакты

В HTML5 добавилось три новых типа type для особенных типов контактов: e-mail-адресов, веб-сайтов и номеров телефонов:

<label for="email">Email-адрес</label>

<input id="email" name="email" type="email">

<label for="website">Вебсайт</label>

<input id="website" name="website" type="url">

<label for="phone">Телефон</label>

<input id="phone" name="phone" type="tel">

И снова эти поля будут вести себя так же, как текстовые поля ввода, но у браузеров будет чуть больше информации о том, какой именно тип данных ожидается в этом поле.

Разработчики Safari уверяют, что их браузер поддерживает эти новые типы ввода, но при быстром взгляде на форму в десктоп-браузере не видно никаких различий с простым использованием

type="text"

. Однако, если вы начнете работать с этой же формой в Mobile Safari, различия станут очевидными. Браузер показывает разные экранные клавиатуры в зависимости от значения атрибута

type

(рис. 4.05).

Тонко сделано, Webkit, тонко.

^{Рис. 4.05. Mobile Safari показывает разные экранные клавиатуры в зависимости от значения атрибута type}

Ползунки

Большое количество JavaScript-библиотек предлагают набор виджетов, которые можно использовать в веб-приложениях. Они отлично работают – пока включен JavaScript. Было бы прекрасно, если бы пользователям не приходилось скачивать JavaScript-файл каждый раз, когда мы хотим добавить интересный элемент управления на нашу страницу.

Классический пример – ползунок. До сих пор нам приходилось использовать JavaScript для того, чтобы эмулировать этот в каком-то смысле интерактивный элемент. В HTML5 благодаря

type="range"

можно воспользоваться элементом управления, встроенным в браузер:

<label for="amount">Почем опиум для народа?</label>

<input id="amount" name="amount" type="range">

Safari и Opera на данный момент поддерживают этот тип элемента ввода, предлагая похожие элементы управления (рис. 4.06).