Формы

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