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

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

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

Как и в случае с атрибутом placeholder, вы можете протестировать, поддерживается ли autofocus, и, если нет, откатиться к решению на JavaScript:

if (!elementSupportsAttribute('input','autofocus')){

document.getElementById('status'). focus;

}

Атрибут autofocus работает не только на элементах input; его можно использовать на любом поле формы – как, например, textarea или select, но его можно использовать только один раз во всем документе.

Required

Один из самых распространенных случаев использования JavaScript – валидация форм на стороне клиента. И снова HTML5 перемещает это решение из JavaScript в разметку. Просто добавьте булев атрибут required:

label for="pass"Ваш пароль/label

input id="pass" name="pass" type="password" required

Теоретически это дает указание браузерам не отправлять форму, если необходимые поля не заполнены. Даже несмотря на то, что пока браузеры этого не делают, уже сейчас можно использовать атрибут required в той валидации форм, которую вы пишете на JavaScript. Вместо того чтобы держать список всех требуемых полей в вашем скрипте или добавлять в разметку class="required", теперь вы можете проверять существование атрибута required.

Autocomplete

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

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

form action="/selfdestruct" autocomplete="off"

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

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

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="Марс"