fieldset и legend

<fieldset> группирует связанные поля формы в один блок; <legend> — подпись этой группы, которую screen reader объявляет перед каждым полем внутри группы.

Зачем нужно

Группировка полей через <fieldset> + <legend> критически важна для доступности радиокнопок и чекбоксов: без неё screen reader не знает, к какому вопросу относится каждый вариант выбора. WCAG 1.3.1 требует программной связи меток с элементами управления — fieldset + legend решают это нативно. Также улучшает визуальную структуру длинных форм.

Где используется

  • Группы radio-кнопок (выбор одного из нескольких)
  • Группы чекбоксов (выбор нескольких из многих)
  • Логические блоки в длинных формах (адрес, платёжные данные, настройки)
  • Формы опросов и анкет

Примеры использования

Группа radio-кнопок

<form>
  <fieldset>
    <legend>Выберите способ доставки</legend>

    <label>
      <input type="radio" name="delivery" value="courier" checked>
      Курьер (1–2 дня)
    </label>

    <label>
      <input type="radio" name="delivery" value="pickup">
      Самовывоз
    </label>

    <label>
      <input type="radio" name="delivery" value="post">
      Почта России (3–7 дней)
    </label>
  </fieldset>
</form>

Screen reader объявит: «Выберите способ доставки. Курьер (1–2 дня), радиокнопка, 1 из 3».

Группа чекбоксов

<fieldset>
  <legend>Интересующие темы</legend>

  <label>
    <input type="checkbox" name="topics" value="html"> HTML
  </label>
  <label>
    <input type="checkbox" name="topics" value="css"> CSS
  </label>
  <label>
    <input type="checkbox" name="topics" value="js"> JavaScript
  </label>
</fieldset>

Логические блоки в форме

<form action="/order" method="post">
  <fieldset>
    <legend>Контактные данные</legend>
    <div>
      <label for="name">Имя</label>
      <input type="text" id="name" name="name" autocomplete="name" required>
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" autocomplete="email" required>
    </div>
  </fieldset>

  <fieldset>
    <legend>Адрес доставки</legend>
    <div>
      <label for="city">Город</label>
      <input type="text" id="city" name="city" autocomplete="address-level2">
    </div>
    <div>
      <label for="address">Улица, дом</label>
      <input type="text" id="address" name="address" autocomplete="street-address">
    </div>
  </fieldset>

  <button type="submit">Оформить заказ</button>
</form>

Стилизация

По умолчанию <fieldset> имеет рамку и отступы. Легко кастомизируется:

fieldset {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

legend {
  font-weight: 600;
  padding: 0 8px;
  color: #333;
}

/* Убрать дефолтный вид fieldset */
fieldset.clean {
  border: none;
  padding: 0;
}

Отключение группы полей

<!-- disabled на fieldset отключает все поля внутри -->
<fieldset disabled>
  <legend>Дополнительные опции (недоступно)</legend>
  <input type="text" name="promo" placeholder="Промокод">
</fieldset>

Частые ошибки

Ошибка Почему плохо Как правильно
Группа radio без <fieldset> + <legend> Screen reader не объявляет вопрос Всегда оборачивай radio/checkbox в fieldset
<legend> вне <fieldset> Нет связи — нарушение структуры <legend> — первый дочерний элемент <fieldset>
Несколько <legend> в одном <fieldset> Невалидный HTML Один <legend> на <fieldset>
<fieldset> для layout Семантически неверно Только для группировки связанных полей

Связанные темы

Ресурсы