Структурирование формы: элементы FIELDSET и LEGEND
<!-- #PCDATA здесь решает проблему смешанного содержимого, по спецификации здесь допустимы только пробелы! --> <!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- группа ЭУ --> <!ATTLIST FIELDSET %attrs; -- %coreattrs, %i18n, %events -- >
<!ELEMENT LEGEND - - (%inline;)* -- "легенда" набора полей -->
<!ATTLIST LEGEND %attrs; -- %coreattrs, %i18n, %events -- accesskey %Character; #ПРЕДПОЛАГАЕТСЯ -- символ быстрого доступа -- > Начальный тег: необходим, Конечный тег: необходим
Определение атрибута элемента LEGEND
align = top|bottom|left|right [CI]
Не рекомендуется. Этот атрибут определяет позицию "легенды" в том, что касается набора полей. Возможные значения:
- top: "Легенда" находится сверху над набором полей. Это значение по умолчанию.
- bottom: "Легенда" находится под набором полей.
- left: "Легенда" находится слева от набора полей.
- right: "Легенда" находится справа от набора полей.
Атрибуты, определённые в другом месте
- id, class (идентификаторы документа)
- lang (язык), dir (направление текста)
- title (название элемента)
- style (название стиля)
- accesskey (символ быстрого доступа)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
Элемент FIELDSET позволяет тематически группировать ЭУ и лэйблы. Группирование ЭУ облегчает пользователю понимание их назначение, одновременно облегчая навигацию табуляцией для визуальных ПА и речевую навигацию для ПА, ориентированных на голосовое управление. Правильное использование этого элемента делает документы более доступными.
Элемент LEGEND даёт возможность установить заглавие к FIELDSET. "Легенда" улучшает доступность, если FIELDSET просматривается невизуально.
В этом примере мы создаём форму, которая может заполняться в мед. учреждении. Она состоит из трёх разделов: персональная информация, история болезни и текущее лечение. Каждый раздел содержит ЭУ для ввода соответствующей информации:
<FORM action="..." method="post"> <P> <FIELDSET> <LEGEND>Персональная информация</LEGEND> Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1"> Имя: <INPUT name="personal_firstname" type="text" tabindex="2"> Адрес: <INPUT name="personal_address" type="text" tabindex="3"> ...другая информация... </FIELDSET> <FIELDSET> <LEGEND>История болезни</LEGEND> <INPUT name="history_illness" type="checkbox" value="Smallpox" tabindex="20"> Оспа <INPUT name="history_illness" type="checkbox" value="Mumps" tabindex="21"> Свинка <INPUT name="history_illness" type="checkbox" value="Dizziness" tabindex="22"> Головокружение <INPUT name="history_illness" type="checkbox" value="Sneezing" tabindex="23"> Кашель ...другие данные... </FIELDSET> <FIELDSET> <LEGEND>Текущее лечение</LEGEND> Лечитесь ли Вы сейчас? <INPUT name="medication_now" type="radio" value="Yes" tabindex="35">Да <INPUT name="medication_now" type="radio" value="No" tabindex="35">Нет
Если Вы лечитесь, укажите ниже, как: <TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40"> </TEXTAREA> </FIELDSET> </FORM>
Заметьте, что в этом примере мы улучшили визуальное представление формы выравниванием элементов в каждом FIELDSET (с помощью таблиц стилей), изменив цвета и шрифты (с помощью таблиц стилей), добавив скрипты (т.е., чтобы открыть только "Текущее лечение", если пользователь укажет, что он/она лечится в данный момент) и т.д.
