Кит Джереми - HTML5 для веб-дизайнеров

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

HTML5 позволяет вам отключить автозаполнение во всей форме или для какого-либо конкретного поля. Атрибут autocompleteне является булевым, но он может принимать только два возможных значения: “on” и “off ”:

По умолчанию браузеры будут считать, что autocomplete имеет значение “on”, и тем самым у них есть возможность осуществить предварительное заполнение формы.

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

autocomplete="off">

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

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

Новый элемент 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-адресов, веб-сайтов и номеров телефонов:

Email-адрес

type="email">

Вебсайт

type="url">

Телефон

type="tel">

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

Разработчики Safari уверяют, что их браузер поддерживает эти новые типы ввода, но при быстром взгляде на форму в десктоп-браузере не видно никаких различий с простым использованием type="text". Однако, если вы начнете работать с этой же формой в Mobile Safari, различия станут очевидными. Браузер показывает разные экранные клавиатуры в зависимости от значения атрибута type( рис. 4.05).