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

Решение
Для группировки связанных полей можно использовать элементы fieldset и legend:

<form method="post" action="fieldset.html">
  <fieldset>
    <legend>Персональная информация</legend>
    <div>
      <label for="fullname">Имя:</label>
      <input type="text" name="fullname" id="fullname" class="txt" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" class="txt" />
    </div>
    <div>
      <label for="password1">Пароль:</label>
      <input type="password" name="password1" id="password1" class="txt" />
    </div>
    <div>
      <label for="password2">Повторите пароль:</label>
      <input type="password" name="password2" id="password2" class="txt" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Адрес</legend>
    <div>
      <label for="address1">Страна:</label>
      <input type="text" name="address1" id="address1" class="txt" />
    </div>
    <div>
      <label for="address2">Область:</label>
      <input type="text" name="address2" id="address2" class="txt" />
    </div>
    <div>
      <label for="city">Город:</label>
      <input type="text" name="city" id="city" class="txt" />
    </div>
    <div>
      <label for="zip">Почтовый индекс:</label>
      <input type="text" name="zip" id="zip" class="txt" />
    </div>
  </fieldset>
  <div>
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Зарегистрироваться!
</form>

h1 {
  font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
form div label {
  float: left;
  width: 40%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}
fieldset {
  border: 1px dotted #61B5CF;
  margin-top: 1.4em;
  padding: 0.6em;
}
legend {
  font: bold 0.8em Arial, Helvetica, sans-serif;
  color: #00008B;
  background-color: #FFFFFF;
}

На рис. 6.10 показан вид сгруппированных элементов при просмотре документа в браузере.

Рис. 6.10. Разделение формы на две секции с помощью тега <fieldset>

Обсуждение
Использование тегов <fieldset> и <legend> очень эффективно для группировки данных формы по категориям. Этот прием позволяет разделить различные группы элементов визуально, при этом экранные дикторы и текстовые устройства «понимают», что обозначенные элементы связаны друг с другом логически. Ситуация была бы иной, если бы вы просто вложили связанные элементы в блок div и задали для него стиль оформления, – их связь была бы вполне очевидна для пользователей обычных броузеров в отличие от тех, кто физически не может увидеть визуальные особенности, созданные с помощью CSS.

Для группировки связанных элементов формы достаточно разместить их между тегами <fieldset> и </fieldset>, причем непосредственно за открывающим тегом следует добавить тег <legend>, содержащий заголовок группы:

 <fieldset>
    <legend>Персональная информация</legend>
    <div>
      <label for="fullname">Имя:</label>
      <input type="text" name="fullname" id="fullname" class="txt" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" class="txt" />
    </div>
    <div>
      <label for="password1">Пароль:</label>
      <input type="password" name="password1" id="password1" class="txt" />
    </div>
    <div>
      <label for="password2">Повторите пароль:</label>
      <input type="password" name="password2" id="password2" class="txt" />
    </div>
  </fieldset>

Стиль тегов <fieldset> и <legend>, как и других HTML-тегов, по умолчанию определяется браузером. При этом сгруппированные элементы окружаются рамкой, а содержание тега <legend> отображается в левом
верхнем углу получившегося окошка. На рис. 6.11 представлен вид тегов <fieldset> и <legend> по умолчанию в броузере Firefox в Windows XP.

Рис. 6.11. Вид тегов <fieldset> и <legend> по умолчанию