HTML5-формы

Вот сценарий: рассматривая адаптивный сайт-образец And the winner isn’t., я решил, что пользователи должны иметь возможность высказать свое разочарование в неудачных фильмах, которые удостоились награды. Мы добавим форму, позволяющую людям поведать нам о фильмах, которые, по их мнению, не должны были стать победителями, а также о фильмах, которые должны были оказаться на месте победителей.

На рисунке 8.1 показано, как будет выглядеть наша основная форма с небольшой базовой стилизацией в браузере Chrome (версии 16).

Форма на сайте And the winner isn’t….

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

Если мы установим фокус на определенном поле (то есть выберем его), то подсказка исчезнет, а если мы уберем фокус с этого поля, ничего не введя в него (еще раз щелкнув кнопкой мыши за пределами соответствующего поля), то подсказка снова отобразится в нем. Более того, открыв эту страницу в браузере Google

Chrome и попытавшись отправить форму, ничего не введя, мы увидим следующее (рисунок 8.2).

Форма просит заполнить поле

Получается, помимо того, что добавляются визуальные украшательства (ползунок и числовые поля ввода со значениями, изменяемыми с помощью мыши), для нашей формы также будет выполняться валидация на стороне клиента. Как уже отмечалось, для того чтобы заставить форму работать подобным образом, обычно приходится прибегать к использованию разного рода JavaScript-решений.

Хорошая новость заключается в том, что все эти элементы интерфейса пользователя (включая упоминавшиеся ранее ползунок, подсказку и числовые поля ввода со значениями, изменяемыми с помощью мыши) обрабатываются исключительно посредством HTML5 без привлечения JavaScript. Посмотрим, как новые возможности HTML5 в области форм делают все это реальным.