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

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

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

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

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

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

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

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

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

Элемент

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

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

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

Элемент

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

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

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

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

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

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

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