17. Формы

17.10 Добавление структуры для формы: элементы FIELDSET и LEGEND

<!--
  #PCDATA is to solve the mixed content problem,
  per specification only whitespace is allowed there!
 -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control group -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LEGEND - - (%inline;)*       -- fieldset legend -->

<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  >

Начальный тег: обязательный, конечный тег: обязательный

Определение атрибутов для LEGEND

align = top|bottom|left|right [CI]

Устаревающий (Deprecated). Этот атрибут определяет позицию легенды с учетом набора полей. Возможные значения:

• 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>Personal Information</LEGEND>
  Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
  First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
  Address: <INPUT name="personal_address" type="text" tabindex="3">
  ...more personal information...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Medical History</LEGEND>
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Smallpox" tabindex="20"> Smallpox
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Mumps" tabindex="21"> Mumps
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Dizziness" tabindex="22"> Dizziness
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Sneezing" tabindex="23"> Sneezing
  ...more medical history...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Current Medication</LEGEND>
  Are you currently taking any medication? 
  <INPUT name="medication_now" 
         type="radio" 
         value="Yes" tabindex="35">Yes
  <INPUT name="medication_now" 
         type="radio" 
         value="No" tabindex="35">No

  If you are currently taking medication, please indicate
  it in the space below:
  <TEXTAREA name="current_medication" 
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

Обратите внимание на то, что в этом примере мы могли бы улучшить визуальную презентацию формы с помощью выравнивания элементов внутри каждого FIELDSET (с помощью стилевых таблиц), добавляя информацию о цвете и шрифте (с помощью стилевых таблиц), добавляя сценарии (скажем, только для открытия текстового поля "current medication", если пользователь укажет, что он/она в настоящее время лечиться) и т.д.