Понятие составных частей HTML5 форм

В форму, созданную с использованием HTML5, входит много элементов, поэтому проанализируем ее. Для облегчения стилизации форма наделяется идентификатором, а затем — HTML5-тегом <hgroup> для заголовка и вступительного текста:

<form id="redemption" method="post">

<hgroup>

<h1>Oscar Redemption</h1>

<h2>Here’s your chance to set the record straight: tell us what year the wrong film got nominated, and which film <b>should</b> have received a nod…</h2> </hgroup>

Три области формы затем заключаются в элемент <fieldset>, сопровождаемый тегом <legend>:

<fieldset>

<legend>About the offending film (part 1 of 3)</legend>

<div>

<label for="film">The film in question?</label>

<input id="film" name="film" type="text" placeholder="e. g. King Kong" required aria-required="true" >

</div>

Как вы можете видеть из этого фрагмента кода, каждый элемент <input> формы также заключается в <div> с соответствующей меткой. Пока все нормально. В первом теге <input> мы как раз сталкиваемся с нашим первым инструментом, касающимся HTML5-форм. После привычных атрибутов id, name и type мы видим placeholder.

Placeholder

Атрибут placeholder в нашем случае выглядит так:

Placeholder="e. g. King Kong"

Наличие подсказки в полях формы стало настолько распространенным требованием, что люди, создающие HTML5-код, решили, что она должна быть встроена в разметку и поддерживаться браузерами. Просто включите атрибут placeholder в свой тег <input>, и его значение будет по умолчанию отображаться, пока соответствующее поле ввода не получит фокус. Если оно потеряет фокус и при этом окажется, что пользователь не ввел никакого значения, то в данном поле ввода вновь отобразится подсказка.

После атрибута placeholder в приведенном чуть ранее фрагменте кода идет следующий параметр, касающийся HTML5-форм, — атрибут required.

Required

Атрибут required в нашем случае выглядит так:

Required aria-required="true"

В совместимых с HTML5 браузерах при добавлении логического атрибута required в элемент <input> вы даете понять, что соответствующее поле ввода обязательно для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Это сообщение будет специфичным (по содержанию и стилизации) в зависимости от браузера и типа поля ввода. Помимо HTML5-атрибута required, в примере мы задействовали его эквивалент WAI-ARIA — aria-required="true". Если только у вас не будет веской причины поступить по-другому, включайте в код эту версию атрибута required, чтобы облегчить задачу экранным дикторам (если помните, мы рассматривали WAI-ARIA еще в главе 4).

Мы уже видели, как выглядит предупреждающее сообщение в обязательном для заполнения поле ввода в браузере Chrome. На рисунке 8.3 показано, как это же сообщение будет выглядеть в браузере Firefox (версии 9).

Требование заполнить поле в браузере Firefox 9

Атрибут required можно применять наряду со многими типами полей ввода для гарантии того, что пользователь введет значение. Примечательными исключениями являются типы полей ввода range, color, button и hidden, поскольку они почти всегда содержат значение по умолчанию.

Следующим HTML5-атрибутом форм, который можно добавить в элементы <input>, является autofocus.

Autofocus

HTML5-атрибут autofocus позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. Приведенный далее фрагмент кода — пример элемента <input>, который заключен в <div> и имеет атрибут autofocus:

<div>

<label for="search">Search the site….</label>

<input id="search" name="search" type="search" placeholder="Wyatt Earp" autofocus> </div>

Будьте внимательны, используя этот атрибут. Возможно возникновение кросс-браузерной неразберихи, если добавить атрибут autofocus для нескольких полей ввода. Например, если сразу несколько элементов <input> включают атрибут autofocus, то при загрузке страницы в Chrome (версии 16) фокус получит последнее поле ввода, обозначенное этим атрибутом. Однако в Firefox (версии 9) в такой ситуации, наоборот, фокус получит первое поле ввода, располагающее атрибутом autofocus.

Следует также учитывать, что некоторые пользователи для прокрутки содержимого веб-страниц нажимают Пробел. На веб-странице, содержащей форму с полем ввода, которое обозначено атрибутом autofocus, эта функция будет недоступна. Вместо прокрутки добавится пробел в поле с фокусом. Легко догадаться, что это может не понравиться пользователям.

Autocomplete

Большинство браузеров по умолчанию помогают пользователям вводить данные, по возможности поддерживая функцию автозаполнения полей соответствующими значениями. В то время как пользователи могут активизировать либо деактивизировать эту функциональность в своих браузерах, теперь мы также можем сообщить браузеру, что не хотим, чтобы форма или поле позволяло задействовать автозаполнение. Это целесообразно не только когда речь идет о конфиденциальных данных (например, о номерах банковских счетов), но и в ситуации, когда вам требуется обязательно обратить внимание пользователя на поле, попросив ввести что-то вручную. Например, во многих формах, которые мне доводится заполнять, если поле с телефонным номером обязательно для заполнения, я ввожу в него вымышленный телефонный номер. Я знаю, что не один так поступаю (разве не все так делают?), но смогу гарантировать, что пользователи не введут вымышленный телефонный номер, если задам значение off для атрибута autocomplete соответствующего поля ввода. Приведенный далее фрагмент кода является примером поля ввода, для атрибута autocomplete которого задано значение off.

<div>

<label for="tel">Telephone (so we can berate you if you’re wrong)</label>

<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >

</div>

Мы также можем сделать так, чтобы автозаполнение не применялось во всех полях формы (а не только в тех, что заключены в элемент <fi eldset>), задействовав атрибут autocomplete в отношении формы как таковой. Вот пример кода:

<form id="redemption" method="post" autocomplete="off">

List (и ассоциированный элемент <datalist>)

Атрибут list и ассоциированный элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Далее приведен пример кода, в котором атрибут list используется вместе с ассоциированным элементом <datalist>, заключенным в тег <div>:

<div>

<label for="awardWon">Award Won</label>

<input id="awardWon" name="awardWon" type="text" list="awards">

<datalist id="awards">

<select>

<option value="Best Picture"></option>

<option value="Best Director"></option>

<option value="Best Adapted Screenplay"></option>

<option value="Best Original Screenplay"></option>

</select>

</datalist>

</div>

Значение, заданное для атрибута list (awards), аналогично идентификатору <datalist>. Это позволяет ассоциировать <datalist> с соответствующим полем ввода. Хотя заключение всех тегов <option> в элемент <selection> не является строго обязательным, оно придется кстати, когда речь зайдет о применении полизаполнений для устаревших браузеров.

Несмотря на то что это поле ввода кажется лишь обычным текстовым полем, если начать печатать в нем, под ним появится окно выбора (в поддерживающих браузерах) с подходящими вариантами из списка <datalist>. На рисунке 8.4 можно увидеть список в действии (в браузере Firefox 9). Поскольку буква B присутствует во всех вариантах в <datalist>, то в перечне отображаются все значения, из которых можно выбрать соответствующий вариант.

При начале ввода появляется список подходящих значений для выбора

Выводятся варианты значений, содержащих букву D.

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

Однако если взамен ввести букву D, то на экране отобразятся только два подходящих варианта (рисунок 8.5).