Заголовок группы HTML legend - как правильно использовать и оформлять

Введение

Тег legend в HTML используется для задания заголовка группы полей формы, оформленных с помощью тега fieldset. С его помощью вы описываете, что это за блок полей, и даете пользователю и вспомогательным технологиям (экранным читалкам) контекст: о чем эти элементы формы.

Без legend поле fieldset теряет часть смысла. Визуально вы можете увидеть рамку вокруг группы элементов, но само название группы нигде не указано семантически. А legend как раз и добавляет эту семантику.

Здесь я покажу вам, как legend работает, где его правильно использовать, какие есть особенности по доступности, стилизации и кроссбраузерности. Мы разберем типичные примеры, а также нестандартные случаи, когда legend вызывает вопросы у разработчиков.

Зачем нужен legend и как он работает

Семантика legend и fieldset

Тег fieldset используется для логической группировки элементов формы:

• поля, относящиеся к одной теме (например, «Контактные данные»)
• варианты одного вопроса (например, несколько radio-кнопок)
• блоки настроек (например, «Настройки уведомлений»)

Тег legend выступает заголовком именно этой группы. Смотрите, как это выглядит в простом виде:

<form>
  <fieldset>
    <!-- legend описывает, что это за группа полей -->
    <legend>Контактная информация</legend>

    <!-- Поле для имени -->
    <label>
      Имя
      <input type="text" name="name">
    </label>

    <!-- Поле для email -->
    <label>
      Email
      <input type="email" name="email">
    </label>
  </fieldset>
</form>

Комментариями я показываю вам, как браузер и пользователь «мысленно» объединяют эти элементы. Экранный читалка, например, озвучит legend перед тем, как перечислять элементы внутри fieldset, и пользователь сразу поймет, к чему относятся поля.

Когда legend нужен, а когда можно без него

Используйте legend, когда:

• вы группируете поля по смыслу, а не просто для стилизации
• хотите сделать форму понятнее и визуально, и с точки зрения доступности
• внутри одной формы есть несколько логических блоков

Можно обойтись без legend, если:

• вы используете fieldset только как технический контейнер ради стилей (и у блока уже есть заголовок выше по иерархии, например h2)
• внутри fieldset всего одно поле, и контекст и так очевиден (но даже здесь legend иногда бывает полезным для доступности)

Влияние legend на доступность

Legend повышает доступность формы:

• экранные читалки используют legend как название группы полей
• пользователю понятнее, к какому вопросу относятся radio или checkbox
• если поле выделено ошибкой, legend помогает понять, в каком блоке проблема

Пример с радио-кнопками, где legend особенно важен:

<form>
  <fieldset>
    <!-- Здесь legend задает сам вопрос -->
    <legend>Выберите предпочитаемый способ связи</legend>

    <!-- Варианты ответа на один вопрос -->
    <label>
      <input type="radio" name="contact" value="email">
      Email
    </label>

    <label>
      <input type="radio" name="contact" value="phone">
      Телефон
    </label>

    <label>
      <input type="radio" name="contact" value="telegram">
      Telegram
    </label>
  </fieldset>
</form>

Без legend пользователь, использующий экранный читалку, слышал бы только список radio с подписями «Email», «Телефон», «Telegram», но сам вопрос был бы потерян. Legend решает эту проблему.

Синтаксис и правила использования legend

Базовый синтаксис

Legend всегда используется вместе с fieldset и должен быть дочерним элементом этого fieldset.

<fieldset>
  <legend>Текст заголовка группы</legend>
  <!-- Содержимое группы -->
</fieldset>

Внутри legend может быть:

• текст
• встроенные элементы (например, span, strong, small)
• но не стоит класть блоковые элементы (div, p, section) — это нарушает семантику и может вести к некорректной верстке и проблемам с доступностью.

Порядок элементов внутри fieldset

С точки зрения стандарта legend должен быть первым дочерним элементом fieldset. Так браузеры ожидают его увидеть и так корректнее всего работают вспомогательные технологии.

Корректная структура:

<fieldset>
  <legend>Личные данные</legend>

  <label>
    Имя
    <input type="text" name="first_name">
  </label>

  <label>
    Фамилия
    <input type="text" name="last_name">
  </label>
</fieldset>

Если вы размещаете legend не первым, могут быть:

• странные визуальные эффекты (например, рамка fieldset ведет себя неожиданно)
• нестабильное поведение в старых браузерах
• менее предсказуемая работа экранных читалок

Вложенные legend и fieldset

По стандарту:

• внутри одного fieldset может быть только один «основной» legend
• вложенные fieldset с собственными legend — допустимы

Давайте разберемся на примере:

<form>
  <fieldset>
    <!-- Общий заголовок блока -->
    <legend>Профиль пользователя</legend>

    <fieldset>
      <!-- Вложенный заголовок для подгруппы -->
      <legend>Основная информация</legend>

      <label>
        Имя
        <input type="text" name="name">
      </label>

      <label>
        Email
        <input type="email" name="email">
      </label>
    </fieldset>

    <fieldset>
      <legend>Настройки уведомлений</legend>

      <label>
        <input type="checkbox" name="notify_email" checked>
        Уведомления по email
      </label>

      <label>
        <input type="checkbox" name="notify_sms">
        Уведомления по SMS
      </label>
    </fieldset>
  </fieldset>
</form>

Смотрите, так вы создаете иерархию:

• «Профиль пользователя» — общий блок
• «Основная информация» и «Настройки уведомлений» — подблоки

Экранные читалки обычно корректно работают с такой структурой, а пользователю становятся понятны и логика, и вложенность.

Содержимое legend и форматирование текста

Какие элементы можно использовать внутри legend

Legend поддерживает почти все встроенные элементы:

• span
• strong, em, b, i
• small
• br
• inline-svg (встраиваемые иконки) — с учетом доступности

Пример:

<fieldset>
  <legend>
    <!-- Жирный текст в заголовке -->
    <strong>Платежные данные</strong>
    <!-- Дополнительная подсказка мелким шрифтом -->
    <small>обязательны для заполнения</small>
  </legend>

  <!-- Поля платежных данных -->
  <label>
    Номер карты
    <input type="text" name="card_number">
  </label>
</fieldset>

Обратите внимание, что здесь small — внутри legend и дополняет основной заголовок.

Чего лучше избегать внутри legend

Не рекомендуется:

• добавлять блочные контейнеры (div, p, ul, section)
• вставлять в legend целые формы или сложные компоненты
• использовать заголовки h1–h6 внутри легенды без необходимости — заголовком группы является сам legend

Если вы хотите сложнее отформатировать текст legend (например, сделать многострочный заголовок с отдельной строкой для примечания), делайте это встроенными элементами или переносом строки:

<fieldset>
  <legend>
    Адрес доставки<br>
    <small>укажите реальный адрес получения заказа</small>
  </legend>

  <!-- Поля адреса -->
</fieldset>

Стилизация legend и fieldset

Базовое оформление по умолчанию

По умолчанию:

• fieldset отображается с рамкой вокруг группы полей
• legend как бы «врезан» в эту рамку, создавая заголовок над границей

В разных браузерах стандартные стили отличаются: толщина рамки, отступы и шрифт могут выглядеть по-разному.

Чтобы добиться единого вида, вы обычно явно задаете стили.

Простая кастомизация legend

Давайте посмотрим базовый пример стилизации:

<style>
  fieldset {
    border: 1px solid #ccc;      /* Тонкая серая рамка */
    padding: 1rem 1.5rem;        /* Внутренние отступы */
    margin-bottom: 1.5rem;       /* Отступ снизу между блоками */
  }

  legend {
    font-weight: 600;            /* Полужирный шрифт */
    font-size: 1.1rem;           /* Чуть больше стандартного */
    padding: 0 0.5rem;           /* Отступы вокруг текста */
  }
</style>

<form>
  <fieldset>
    <legend>Информация о заказе</legend>
    <!-- Поля формы -->
  </fieldset>
</form>

Как видите, здесь вы просто задаете визуально более приятный стиль, сохраняя стандартное размещение legend.

Выравнивание и позиционирование legend

По умолчанию legend располагается в левом верхнем углу fieldset. Если нужно изменить:

• центрировать legend
• выровнять по правому краю
• сместить относительно рамки

делается это через CSS.

Пример выравнивания по центру:

<style>
  fieldset {
    border: 1px solid #ccc;
    padding: 1.5rem;
  }

  legend {
    text-align: center;          /* Центрируем текст */
    width: 100%;                 /* Растягиваем legend по ширине fieldset */
    padding: 0 0.5rem;
    font-weight: 600;
  }
</style>

Обратите внимание: без width: 100% центрирование может выглядеть не так, как вы ожидаете, из‑за особенностей рендеринга legend в разных браузерах.

Удаление стандартной рамки и создание кастомного вида

Иногда вам не нужна рамка вокруг группы полей, но вы хотите сохранить семантику fieldset и legend. Тогда вы можете убрать бордер и имитировать обычный заголовок блока.

<style>
  fieldset {
    border: none;                /* Убираем стандартную рамку */
    padding: 0;                  /* Сбрасываем отступы */
    margin: 0 0 1.5rem 0;        /* Оставляем только внешний отступ снизу */
  }

  legend {
    font-size: 1.25rem;          /* Большой заголовок */
    font-weight: 700;            /* Жирное начертание */
    margin-bottom: 0.5rem;       /* Отступ под заголовком */
  }
</style>

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <!-- Поля без рамки вокруг -->
  </fieldset>
</form>

Так вы сохраняете семантику для доступности, но визуально это выглядит как обычный заголовок перед блоком формы.

Кастомный фон и рамка вокруг legend

Если вы хотите подчеркнуть заголовок группы, можно задать ему фон и немного сместить относительно fieldset:

<style>
  fieldset {
    border: 1px solid #ddd;
    padding: 1.5rem 1.5rem 1rem;
    position: relative;          /* Для возможного позиционирования потомков */
  }

  legend {
    padding: 0.25rem 0.75rem;
    background-color: #fff;      /* Фон легенды */
    border-radius: 4px;
    font-weight: 600;
    color: #333;
  }
</style>

<form>
  <fieldset>
    <legend>Настройки аккаунта</legend>
    <!-- Поля -->
  </fieldset>
</form>

Здесь legend визуально отделен от рамки поле fieldset и смотрится как яркий заголовок.

Поддержка и особенности в разных браузерах

Некоторые моменты, на которые стоит обратить внимание:

• в старых версиях Internet Explorer и некоторых мобильных браузерах стилизация legend была ограничена (например, не все свойства корректно применялись)
• в современных браузерах (Chrome, Firefox, Safari, Edge) стили legend в целом предсказуемы, но точное поведение может немного отличаться

Если вы делаете сложную стилизацию, стоит протестировать ее в нескольких браузерах, особенно если вы используете:

• position: absolute для legend
• нестандартные отступы или трансформации
• сложные комбинации с flex или grid

legend и современные подходы к вёрстке форм

Использование legend с flex и grid

Хотя fieldset сам по себе не является flex или grid контейнером, вы можете легко совмещать его с этими технологиями.

Например, вы хотите сделать двухколоночную форму внутри fieldset:

<style>
  fieldset {
    border: 1px solid #ddd;
    padding: 1.5rem;
  }

  legend {
    font-weight: 600;
    padding: 0 0.25rem;
  }

  .form-grid {
    display: grid;               /* Включаем Grid внутри fieldset */
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;              /* Вертикальные и горизонтальные отступы */
  }

  .form-grid label {
    display: flex;
    flex-direction: column;      /* Подпись над полем */
  }
</style>

<form>
  <fieldset>
    <legend>Личные данные</legend>

    <!-- Внутри fieldset обычный div с Grid -->
    <div class="form-grid">
      <label>
        Имя
        <input type="text" name="first_name">
      </label>
      <label>
        Фамилия
        <input type="text" name="last_name">
      </label>
      <label>
        Город
        <input type="text" name="city">
      </label>
      <label>
        Страна
        <input type="text" name="country">
      </label>
    </div>
  </fieldset>
</form>

Полезный момент: вы оставляете legend как отдельный элемент и не пытаетесь «встроить» его в сетку. Так структура остается ясной.

Скрываться ли legend визуально

Иногда дизайнер не хочет видеть текст legend в интерфейсе, но семантика вам нужна. В этом случае вы можете скрыть legend визуально, но оставить его для экранных читалок.

Это важно делать безопасно, а не просто через display: none, потому что display: none скрывает элемент и для помощников.

Пример корректного «визуального» скрытия:

<style>
  .sr-only {
    /* Класс визуального скрытия элемента */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<form>
  <fieldset>
    <!-- Legend скрыт визуально, но доступен для читалок -->
    <legend class="sr-only">Настройки уведомлений</legend>

    <label>
      <input type="checkbox" name="notify_email">
      Email уведомления
    </label>

    <label>
      <input type="checkbox" name="notify_sms">
      SMS уведомления
    </label>
  </fieldset>
</form>

Такой подход часто используется в интерфейсах, где визуально заголовок группы уже передан другим элементом (например, общей секцией формы), но формальная семантика группы все равно важна.

legend и валидация формы

Legend может участвовать в отображении ошибок и подсказок. Вы можете, например:

• подсветить рамку fieldset, если ошибка в одном из полей
• добавить к legend индикатор ошибки или обязательности

Давайте разберемся на примере:

<style>
  fieldset.error {
    border-color: #e53935;              /* Красная рамка при ошибке */
  }

  fieldset.error legend {
    color: #e53935;                     /* Красный заголовок при ошибке */
  }

  fieldset.error legend::after {
    content: " — есть ошибки в этой группе";
    font-weight: 400;
    font-size: 0.9em;
  }
</style>

<form>
  <fieldset class="error">
    <legend>Адрес доставки</legend>

    <!-- Допустим, здесь одно из полей не заполнено -->
    <label>
      Улица
      <input type="text" name="street" required>
    </label>
  </fieldset>
</form>

Обратите внимание, как этот фрагмент кода помогает пользователю быстро понять, в каком блоке формы возникла ошибка. Браузер визуально выделяет всю группу, а вы дополнительно информируете пользователя через legend::after.

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

Пример 1. Опрос с несколькими вопросами

Покажу вам, как легенды используются в опросах, где есть несколько вопросов с ответами radio.

<form>
  <!-- Вопрос 1 -->
  <fieldset>
    <legend>Как часто вы пользуетесь нашим сервисом</legend>

    <label>
      <input type="radio" name="usage_frequency" value="daily">
      Каждый день
    </label>

    <label>
      <input type="radio" name="usage_frequency" value="weekly">
      Несколько раз в неделю
    </label>

    <label>
      <input type="radio" name="usage_frequency" value="rarely">
      Редко
    </label>
  </fieldset>

  <!-- Вопрос 2 -->
  <fieldset>
    <legend>Насколько вы довольны качеством поддержки</legend>

    <label>
      <input type="radio" name="support_quality" value="1">
      1 — совсем не доволен
    </label>

    <label>
      <input type="radio" name="support_quality" value="5">
      5 — полностью доволен
    </label>
  </fieldset>

  <button type="submit">Отправить</button>
</form>

Каждый fieldset представляет отдельный вопрос, а legend формулирует этот вопрос. Радиокнопки внутри — варианты ответа. Такая структура очень хорошо воспринимается и браузерами, и пользователями.

Пример 2. Многошаговая форма внутри одной страницы

Иногда многошаговый процесс оформляют на одной странице, просто скрывая и показывая разные fieldset.

<style>
  .step {
    display: none;            /* По умолчанию шаги скрыты */
  }

  .step.active {
    display: block;           /* Активный шаг показан */
  }
</style>

<form>
  <!-- Шаг 1 -->
  <fieldset class="step active" id="step-1">
    <legend>Шаг 1 — личная информация</legend>

    <label>
      Имя
      <input type="text" name="first_name">
    </label>

    <label>
      Фамилия
      <input type="text" name="last_name">
    </label>
  </fieldset>

  <!-- Шаг 2 -->
  <fieldset class="step" id="step-2">
    <legend>Шаг 2 — контактные данные</legend>

    <label>
      Email
      <input type="email" name="email">
    </label>

    <label>
      Телефон
      <input type="tel" name="phone">
    </label>
  </fieldset>

  <!-- Кнопки управления шагами могли бы переключать классы active -->
</form>

Здесь legend помогает пользователю ориентироваться, на каком шаге он сейчас находится: текст легенды содержит и номер шага, и его смысл.

Пример 3. Логическая группировка настроек

Частый сценарий — страница настроек, где вы группируете опции по категориям.

<form>
  <fieldset>
    <legend>Уведомления</legend>

    <label>
      <input type="checkbox" name="notify_email" checked>
      Получать уведомления по email
    </label>

    <label>
      <input type="checkbox" name="notify_push">
      Получать push-уведомления
    </label>
  </fieldset>

  <fieldset>
    <legend>Конфиденциальность</legend>

    <label>
      <input type="checkbox" name="profile_public">
      Профиль виден всем пользователям
    </label>

    <label>
      <input type="checkbox" name="search_engine_index">
      Разрешить индексировать профиль поисковикам
    </label>
  </fieldset>
</form>

Такой подход делает интерфейс понятнее и визуально, и логически.

Доступность legend: нюансы и хорошие практики

Каким должен быть текст legend

Формулируйте текст legend так, чтобы он:

• давал общий контекст для полей внутри группы
• не повторял дословно текст отдельных label
• был кратким, но информативным

Неудачный вариант:

• legend: «Выбор способа связи»
• label: «Выбор способа связи Email», «Выбор способа связи Телефон»

Лучше:

• legend: «Как с вами связаться»
• label: «Email», «Телефон», «Telegram»

Язык и атрибут lang

Если legend содержит текст на другом языке, чем остальная страница, укажите язык:

<fieldset>
  <legend lang="en">Billing information</legend>
  <!-- Поля -->
</fieldset>

Это помогает экранным читалкам переключить озвучку на нужный язык.

Не используйте legend вместо label

Иногда разработчики пытаются использовать legend «вместо» отдельных label, особенно для радио-кнопок. Лучше придерживаться связки:

• legend — вопрос или название группы
• label — подпись конкретного элемента

Пример корректной структуры:

<fieldset>
  <legend>Выберите ваш пол</legend>

  <label>
    <input type="radio" name="gender" value="male">
    Мужской
  </label>

  <label>
    <input type="radio" name="gender" value="female">
    Женский
  </label>
</fieldset>

Так пользователь слышит:

• сначала legend («Выберите ваш пол»)
• затем каждый вариант с подписью («Мужской», «Женский»)

Типичные ошибки при работе с legend

Ошибка 1. Отсутствие legend при использовании fieldset

Разработчики нередко добавляют fieldset ради рамки или стилизации, но забывают legend. Тогда вы теряете часть семантики, а пользователям с экранными читалками становится сложнее.

Если вы используете fieldset, почти всегда имеет смысл добавить legend.

Ошибка 2. Несколько legend в одном fieldset

Формально браузеры могут отобразить несколько legend, но поведение становится менее предсказуемым, особенно для доступности. Лучше:

• один fieldset — один legend
• для подгрупп использовать вложенные fieldset с собственными legend

Ошибка 3. Размещение legend где угодно, кроме начала fieldset

Хотя браузеры часто «терпят» legend не в начале, это может сломать:

• визуальное расположение рамки
• работу некоторых старых браузеров
• корректность озвучки экранными читалками

Старайтесь всегда делать legend первым дочерним элементом.

Ошибка 4. Стилизация через display: block или display: flex с побочными эффектами

Некоторые комбинации, особенно устаревшие, могли вести к странному поведению fieldset и legend. В современных браузерах ситуация лучше, но если вы видите, что:

• рамка обрезается
• легенда смещается не туда, куда нужно

проверьте, какие свойства вы задали legend и fieldset, и поэкспериментируйте с более простыми вариантами.

Ошибка 5. Полное скрытие legend через display: none

Если вы не хотите показывать legend визуально, не используйте display: none или visibility: hidden — так вы скроете легенду и для ассистивных технологий.

Используйте технику «visually hidden» (как в примере с классом sr-only выше).

Заключение

Legend — небольшой, но важный тег, который делает формы в HTML более понятными и структурированными. В связке с fieldset он:

• задает заголовок группы полей
• улучшает доступность для пользователей, в том числе с экранными читалками
• помогает логически разбить форму на блоки

Главные практические рекомендации:

• всегда ставьте legend первым дочерним элементом fieldset
• формулируйте текст легенды как общий вопрос или название группы
• не заменяйте legend заголовками h2–h3, если вам важна доступность именно поля ввода
• при скрытии легенды визуально используйте специальные CSS-техники, а не display: none
• не перегружайте legend сложной вёрсткой — он должен оставаться понятным и структурно простым

Используя legend осознанно, вы делаете формы не только визуально аккуратными, но и семантически корректными, что особенно важно в реальных продуктах и сервисах.

Частозадаваемые технические вопросы по legend

Как сделать, чтобы legend занимал всю ширину fieldset и выровнять текст по центру

Используйте сочетание text-align и width:

legend {
  width: 100%;          /* Растянуть на всю ширину fieldset */
  text-align: center;   /* Центрировать текст */
}

Так legend будет вести себя как блочный заголовок над группой.

Можно ли сделать legend кликабельным и разворачивать или сворачивать группу полей

Да, но лучше не вешать обработчик прямо на legend, а использовать кнопку внутри:

<fieldset>
  <legend>
    <button type="button" id="toggle-group">
      Дополнительные настройки
    </button>
  </legend>
  <div id="group-content">
    <!-- Поля -->
  </div>
</fieldset>

Далее в JS переключайте скрытие блока group-content. Так вы сохраняете управляемый фокус и понятный интерфейс.

Как добавить иконку в legend и сделать ее доступной

Вставьте SVG или иконку шрифтом и добавьте текстовую подпись:

<legend>
  <span aria-hidden="true">⚙</span>
  <span>Настройки системы</span>
</legend>

Атрибут aria-hidden скрывает иконку от читалок, оставляя для них только текст.

Почему стили border-radius для fieldset иногда работают странно с legend

Legend «разрывает» рамку fieldset, и закругление углов может выглядеть неровно. Если нужен аккуратный border-radius:

• скрывайте стандартную рамку fieldset (border: none)
• оборачивайте содержимое в div с нужными бордерами и скруглениями
• оставляйте legend отдельно, стилизуя его как заголовок над этим div

Можно ли использовать legend вне fieldset

По спецификации legend должен быть прямым потомком fieldset. Если вы используете legend отдельно, браузер может отобразить его как обычный блок или встроенный элемент, но семантика будет потеряна. Для обычных заголовков вне fieldset лучше использовать h2–h4 или div с ролью заголовка.