Новые свойства форм в HTML5

Элемент <datalist> и атрибут list

До сих пор мы привыкли использовать элементы <select> и <option> для создания раскрывающихся списков вариантов выбора для пользователей. Но как быть, если мы захотим создать список, который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял вводить свои собственные? Это требует кропотливого создания сценария – но теперь можно просто использовать атрибут list, чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе <datalist>.

<input type="text" list="mydata" … >
<datalist id="mydata">
    <option label="Mr" value="Mister">
    <option label="Mrs" value="Mistress">
    <option label="Ms" value="Miss">
</datalist>

Создание элемента ввода с предложениями с помощью datalist

<input type="tel">, <input type="e-mail"> и <input type="url">

Как предполагают названия, эти новые типы элементов ввода имеют отношение к телефонным номерам, адресам e-mail, или URL. Браузеры будут отображать их как обычные текстовые поля ввода, но явное указание, какой вид текста ожидается в этих полях, играет важную роль в проверке формы на стороне клиента. Кроме того, на некоторых мобильных устройствах браузер будет переключаться из своей обычной экранной клавиатуры для ввода обычного текста в более контекстно-подходящие варианты. Здесь также возможно, что в будущем браузеры будут использовать дополнительные преимущества этих явно размеченных элементов ввода, чтобы предложить новые возможности, такие как автозавершение адресов e-mail и телефонных номеров на основе списка контактов пользователя или адресной книги.

Новые атрибуты

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

placeholder

Обычный удобный прием в формах Web состоит в размещении замещаемого контента в текстовых полях ввода – например, чтобы предоставить дополнительную информацию об ожидаемом типе информации, ввод которой должен выполнить пользователь – который исчезает, когда элемент управления формы получает фокус. Хотя это обычно требует использования JavaScript (удаление контента поля формы в фокусе и восстановление текста по умолчанию, если пользователь покидает поле, не вводя ничего), мы можем теперь использовать просто атрибут placeholder:

<input type="text"… placeholder="John Doe">

Текстовое поле ввода с замещаемым текстом

autofocus

Другим обычным свойством, которое ранее требовало использования сценария, является автоматическое помещение поля формы в фокус при загрузке страницы. Теперь это можно сделать с помощью атрибута autofocus:

<input type="text" autofocus … >

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

min и max

Как предполагают имена, эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо, на самом деле, определять, какие значения возвращаются при отправке формы. Код вполне простой и не требует пояснений:

<input type="number" … min="1" max="10">

step

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step, помня о том, что для элементов ввода time значение атрибута задается в секундах:

<input type="time" … step="1800">

Новые механизмы вывода

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

<output>

Мы уже упоминали об элементе вывода output, когда говорили об элементе ввода range – этот элемент служит средством вывода "результата вычислений", или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML, например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output, можно – аналогично тому как для label – передать список ID в дополнительном атрибуте for элемента.

<input type="range" id="rangeexample" … >
<output onforminput="value=rangeexample.value" for="rangeexample"></output>

<progress> и <meter>

Два этих новых элемента очень похожи, оба в результате создают индикатор/панель, выводимую пользователю. Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения.

Панель индикатора выполнения

Проверка

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

Примечание: Чтобы можно было проверять элементы управления формы, они должны иметь атрибут name, так как без него они в любом случае не могут быть отправлены как часть формы.

required

Одним из наиболее общих аспектов проверки формы является принудительное заполнение требуемых полей – недопущение отправки формы, пока определенные элементы информации не будут введены. Это можно теперь легко реализовать, добавляя атрибут required к элементам input, select или textarea.

<input type="text" … required>

Клиентская проверка в браузере Opera в действии, показывающая ошибку для требуемого поля, которое было оставлено пустым

type и pattern

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

Сообщение об ошибке браузера Opera для неверного адреса e-mail в поле ввода

Для других текстовых полей ввода, которые, тем не менее, должны следовать определенной структуре (например, формы регистрации, где имя пользователя может содержать только определенную последовательность букв нижнего регистра и цифр), авторы могут использовать атрибут pattern для определения своего собственного регулярного выражения.

<input type="text" … pattern="[a-z]{3}[0-9]{3}">

Стилевое оформление с помощью CSS3

Соответственно встроенной проверке форм HTML5, Модуль Базового Интерфейса Пользователя CSS3 (http://www.w3.org/TR/css3-ui/) определяет последовательность новых псевдо-классов, которые могут использоваться для различения требуемых полей и для динамического изменения внешнего вида элементов управления формы на основе того, были они заполнены правильно или нет:

• :required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут
• :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки
• :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max.

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

input[type=text]:focus:valid,
input[type=e-mail]:focus:valid,
input[type=number]:focus:in-range { outline: 2px #0f0 solid; }

input[type=text]:focus:invalid,
input[type=e-mail]:focus:invalid,
input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }

Стили :valid и :invalid, применяемые динамически во время ввода адреса e-mail

Как обстоят дела для различных браузеров?

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

Предполагается, что браузеры, которые не понимают новые типы элементов ввода (такие как date или number ) будут просто интерпретировать их как стандартные текстовые элементы ввода – не так как их более развитые в отношении HTML5 аналоги, но, по крайней мере, они позволяют заполнить формы. Однако, как и в отношении большей части новых функций HTML5, можно предложить лучшие резервные варианты для пользователей браузеров, которые недостаточно развиты для работы с формами HTML5, выполнять базовую проверку свойств на основе JavaScript и, только в случае необходимости, загружать внешние библиотеки JavaScript, чтобы "имитировать" поддержку более сложных виджетов элементов управления форм и проверку. Таким образом можно уже программировать будущее, не отвергая существующих пользователей.