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

Placeholder

Вот типичная задача, которая часто используется для поисковых форм и обычно решается написанием скрипта для DOM:

1. Если у поля формы нет значения, вставить туда текст-заполнитель.

2. Когда пользователь перемещает фокус на это поле, убрать текст-заполнитель.

3. Если пользователь выходит из поля и в нем по-прежнему нет значения, снова поставить текст-заполнитель.

Текст-заполнитель обычно показывается шрифтом более светлого цвета, чем шрифт самого значения поля формы. Это реализуется с помощью CSS, JavaScript или обоими этими инструментами вместе.

В документе HTML5 вы можете просто использовать атрибут placeholder (рис. 4.01):

<label for="hobbies">Ваши хобби</label>

<input id="hobbies" name="hobbies" type="text"placeholder="Стряхивать филинов с деревьев">

Рис. 4.01. «Стряхивать филинов с деревьев» появляется в поле input посредством атрибута placeholder

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

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

Либо же вы можете сделать запасное решение на JavaScript. В этом случае вам нужно убедиться, что скрипт на JavaScript будет исполняться только в браузерах, которые не понимают атрибут placeholder.

Вот маленькая JavaScript-функция общего характера, которая тестирует, поддерживается тот или иной атрибут или нет:

function elementSupportsAttribute(element,attribute) {

var test = document.createElement(element);

if (attribute in test) {

return true;

} else {

return false;

}

}

Работает это так: в памяти создается «фантомный» элемент (в вашем документе его нет), а затем проверяется, есть ли в прототипе этого элемента свойство с тем же названием, что и атрибут, который вы передаете в эту функцию. Функция вернет true или false.

С помощью этой функции вы можете удостовериться, что JavaScript-решение будет исполняться только в тех браузерах, которые не поддерживают placeholder:

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

// Код запасного решения на JavaScript.

}

Autofocus

«Привет! Я автофокус. Может быть, вы помните меня по кнопочкам на сайтах: “Google: мне повезет” и “Twitter: что происходит?”»

Это простое типовое решение из одного шага, которое достаточно просто программируется на JavaScript:

1. Когда документ загрузился, автоматически поставить фокус на одно конкретное поле в форме.

HTML5 позволяет вам сделать это с помощью булева атрибута autofocus:

<label for="status">Что происходит?</label>

<input id="status" name="status" type="text" autofocus>

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

Мне понятно, почему атрибут 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="Марс">

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

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

<option value="Уран">

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

</datalist>

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

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

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

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

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

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