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

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

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

Ваши хобби

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.

}

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

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

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

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

Что происходит?

autofocus>

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

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

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

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

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

document.getElementById('status'). focus();

}

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

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

Ваш пароль

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