18c0693f

Структурирование формы: элементы 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] Не рекомендуется. Этот атрибут определяет позицию "легенды" в том, что касается набора полей. Возможные значения:

Атрибуты, определённые в другом месте

  • 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 (с помощью таблиц стилей), изменив цвета и шрифты (с помощью таблиц стилей), добавив скрипты (т.е., чтобы открыть только "Текущее лечение", если пользователь укажет, что он/она лечится в данный момент) и т.д.