Если вы хотите, чтобы в ваших формах было два варианта автозаполнения, это тоже возможно. Если вы хотите, чтобы предварительное заполнение было включено в форме, но отключено для одного-двух полей, можно сделать так:
Никакого запасного варианта на JavaScript для браузеров, которые не поддерживают атрибут
autocomplete
, нет. В этом случае новый атрибут HTML5 дополняет существующее поведение браузеров, а не заменяет решение на JavaScript.
Возможность отключать автозаполнение в браузерах может
показаться странным дополнением к спецификации HTML5. HTML5 предназначен для того, чтобы закрепить превалирующие решения, и в данном случае это не очень типичный пример. Но учитывая потенциальные риски безопасности, которые связаны с автоматическим заполнением форм, имеет смысл дать владельцам сайтов возможность переопределить именно эту функцию браузера.
Datalist
Новый элемент
datalist
позволяет вам скрестить обычный элемент input с элементом select. С помощью атрибута
list
вы можете сопоставить с полем формы список опций (рис. 4.02):
Это позволяет юзерам выбрать опцию из приготовленного списка или ввести значение, которого в списке нет. Это очень полезно для ситуаций, которые обычно требуют отдельного поля в форме, озаглавленного: «если вы выбрали вариант “другое”, пожалуйста, укажите…» (рис. 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).