HTML / 9. Формы

Группировка элементов формы и обеспечение их надписями

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

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

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

Тег <label>
Используйте тег <label> для установления связи между элементом формы, таким как текстовое поле ввода, и одной или несколькими текстовыми метками. В соответствии с последними стандартами броузер должен обращаться с текстом метки специальным образом. Броузеры могут выбирать особый стиль их отображения (вы тоже, применяя таблицы стилей). И когда пользователь останавливается на метке, броузер должен автоматически активизировать соответствующий элемент формы.

Явное и неявное привязывание меток
Одна или несколько меток могут связываться с элементом формы одним из двух способов: неявно, путем включения элемента формы в виде содержимого в теге <label>, или явно, указанием ID-элемента в атрибуте for тега <label>.

Примеры в XHTML:

<label for="SSN">Номер социального страхования:</label>
<input type="text" name="SocSecNum" id="SSN" /><label>Дата рождения: <input type="text" name="DofB" /></label>

Первая метка явно связывает текст «Номер социального страхования» с полем ввода текста (SocSecNum), поскольку значение ее атрибута for идентично id поля ввода, «SSN». Вторая метка («Дата рождения») не требует атрибута for, как и ассоциированное с ней поле не нуждается в атрибуте id, поскольку они неявно соединены тем, что тег <input> помещен внутри тега <label>.

Будьте осторожны и не путайте атрибутов name и id. Первый создает имя
элемента, используемое обработчиком формы со стороны сервера, второй указывает имя, которое может применяться тегом <label> и в URL. Заметьте также, что хотя метка может ссылаться только на один элемент формы, несколько меток могут ссылаться на один элемент. Это дает возможность перемещать пользователя к конкретному полю ввода из разных областей документа.

Другие атрибуты метки
К меткам относятся многие общие атрибуты тегов: отображения, доступа и событий, описанные в разделе 9.9. В дополнение к атрибутам событий стандартов HTML 4 и XHTML метки поддерживают также атрибуты onfocus и onblur.

Формирование групп
Помимо создания меток отдельных элементов, можно объединить в группу ряд элементов формы и определить метки для этой группы при помощи тегов <fieldset> и <legend>. Здесь снова стандарты HTML 4 и XHTML пытаются сделать формы более доступными, особенно для
пользователей с физическими недостатками. Явное предназначение группы элементов позволяет особым образом отображать содержимое формы и вообще обращаться с ним иначе.

Тег <fieldset>
Тег <fieldset> заключает в себе часть содержимого формы, создавая группу связанных элементов. У тега <fieldset> нет обязательных и свойственных только ему атрибутов.Когда группа элементов формы находится в теге <fieldset>, броузер может отображать их особым способом – заключая группу в рамку, применяя 3D-эффекты или даже создавая субформу, содержащую элементы группы.

Тег <legend>
Используйте тег <legend> для создания метки группы элементов формы. Этот тег может находиться только внутри тега <fieldset>. Как и в случае <label>, содержимое тега <legend> может специальным образом трактоваться броузером в соответствии со стандартами HTML 4 и XHTML, активизируя ассоциированную с ним группу, когда пользователь выбирает легенду, облегчая тем самым доступ к набору <fieldset>.В дополнение к свойственным множеству элементов форм атрибутам, описанным в разделе 9.9, тег <legend> допускает атрибуты acesskey и align. Значением align могут быть top, bottom, left и right, указывающие броузеру, как должна располагаться легенда по отношению к группе элементов из <fieldset>.

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

<fieldset> <legend>Personal information</legend>
<label>Name:<input type="text" /></label>
<label>Address:<input type="text" /></label>
<label>Phone:<input type="text" /></label>

Статьи по HTML на эту тему:

Программирование форм
Эффективные формы

Вернуться в раздел: HTML / 9. Формы