HTML тег <legend>

Тег `<legend>` определяет подпись для группы элементов управления формой, обёрнутых в элемент <fieldset>. В браузере fieldset отображается в виде рамки, а подпись legend накладывается на верхнюю границу этой рамки. Группировка связанных элементов управления внутри <form> с помощью `<fieldset>` и подписи `<legend>` делает сложные формы более понятными и значительно доступнее.

На этой странице описаны правила правильного размещения `<legend>`, то, как вспомогательные технологии используют этот тег, как настроить доступные пары label/input, а также как обрабатывать реальные случаи — например, форму, разбитую на несколько секций.

Почему `<legend>` должен быть первым дочерним элементом `<fieldset>`

Спецификация HTML требует, чтобы `<legend>` был первым дочерним элементом своего `<fieldset>`. Это не просто соглашение по стилю:

От этого зависит отображение. Браузер позиционирует legend на верхней границе рамки fieldset. Если legend не стоит первым, он теряет это специальное расположение, и рамка отрисовывается некорректно.
От этого зависит дерево доступности. Браузеры сопоставляют первый `<legend>` с доступным именем fieldset. Legend, размещённый в любом другом месте, воспринимается как обычное содержимое и не объявляется как метка группы.

`<fieldset>` может содержать только один `<legend>`, и он должен стоять перед любыми элементами управления. Если нужна вторая подпись — нужен второй `<fieldset>`.

Доступность: как экранные дикторы используют legend

Сочетание `<fieldset>` и `<legend>` — стандартный способ подписать группу элементов управления (классический пример — набор переключателей, относящихся к одному вопросу).

Когда экранный диктор перемещает фокус на любой элемент управления внутри fieldset, он объявляет текст legend как префикс к собственной метке этого элемента. Например, если legend — Адрес доставки, а поле называется Город, экранный диктор читает примерно «Адрес доставки, Город, текстовое поле.» Это сообщает пользователю, к какой секции относится каждое поле, не вынуждая его покидать группу. Простой текст вроде Имя:, свободно расположенный рядом с полем ввода, не является программной меткой и не даёт такого контекста — всегда связывайте каждый элемент управления с настоящим <label>.

Синтаксис

Тег `<legend>` является парным. Текст подписи пишется между открывающим `<legend>` и закрывающим `</legend>` тегами, и он должен быть первым внутри `<fieldset>`.

Пример HTML-тега `<legend>`:

Пример ниже демонстрирует доступную разметку: каждый элемент управления имеет атрибут id, а каждый <label> ссылается на него через соответствующий атрибут for. Щелчок по метке фокусирует соответствующее поле ввода, а экранные дикторы читают legend вместе с меткой.

HTML-тег `<legend>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <br>
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" />
        <br>
        <br>
        <label for="dob">Date of birth:</label>
        <input type="date" id="dob" name="dob" />
        <br>
        <br>
        <label for="pob">Place of birth:</label>
        <input type="text" id="pob" name="pob" />
      </fieldset>
    </form>
  </body>
</html>

Попробуйте сами »

Результат

Пример HTML-тега `<legend>` с CSS:

Пример тега `<legend>` со свойствами CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      form {
        width: 55%;
      }
      fieldset {
        padding: 25px;
      }
      label {
        display: inline-block;
        width: 95px;
        text-align: right;
      }
      legend {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #cccccc;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <br>
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" />
        <br>
        <br>
        <label for="dob">Date of birth:</label>
        <input type="date" id="dob" name="dob" />
        <br>
        <br>
        <label for="pob">Place of birth:</label>
        <input type="text" id="pob" name="pob" />
      </fieldset>
    </form>
  </body>
</html>

Попробуйте сами »

Пример с несколькими fieldset и legend:

Реальные формы обычно разбиты на несколько групп — например, форма оформления заказа с отдельными секциями для доставки и оплаты. Каждая группа получает свой `<fieldset>` и свой `<legend>`. Экранный диктор тогда добавляет перед каждым полем название правильной секции, и пользователь всегда знает, редактирует ли он адрес доставки или адрес оплаты.

Форма с группами доставки и оплаты

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Shipping address</legend>
        <label for="ship-name">Full name:</label>
        <input type="text" id="ship-name" name="ship-name" />
        <br>
        <br>
        <label for="ship-city">City:</label>
        <input type="text" id="ship-city" name="ship-city" />
      </fieldset>
      <fieldset>
        <legend>Billing address</legend>
        <label for="bill-name">Full name:</label>
        <input type="text" id="bill-name" name="bill-name" />
        <br>
        <br>
        <label for="bill-city">City:</label>
        <input type="text" id="bill-city" name="bill-city" />
      </fieldset>
    </form>
  </body>
</html>

Fieldset и legend также являются рекомендуемым способом подписать набор переключателей, где legend задаёт вопрос, а у каждого переключателя есть собственная метка:

<form>
  <fieldset>
    <legend>Choose a shipping speed</legend>
    <label for="standard">Standard (5–7 days)</label>
    <input type="radio" id="standard" name="speed" value="standard" />
    <br>
    <label for="express">Express (1–2 days)</label>
    <input type="radio" id="express" name="speed" value="express" />
  </fieldset>
</form>

Атрибуты

Атрибут	Значение	Описание
align	left right center justify	Определял горизонтальное выравнивание подписи относительно fieldset. Устарел — удалён из HTML5; вместо него используйте CSS.

Тег `<legend>` поддерживает Глобальные атрибуты и Атрибуты событий.

Замена устаревшего атрибута `align`

Старый атрибут align="center" больше не работает надёжно и не должен использоваться. Эквивалент в CSS — свойство text-align у самого `<legend>`:

/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
  text-align: center;
}

Особенности позиционирования, которые нужно знать:

По умолчанию legend располагается на верхней границе fieldset, ближе к левому краю. Браузеры резервируют для legend специальную позицию в макете, поэтому он не ведёт себя как обычный блочный элемент.
Свойство text-align перемещает подпись горизонтально в пределах пространства, которое браузер ему выделяет — результаты различаются в разных браузерах, поэтому проверяйте целевые браузеры.
Для точного управления можно переопределить стандартное расположение с помощью свойства position и смещений или использовать padding / margin для сдвига текста. Задание ширины через width у legend позволяет выровнять его так, как это подразумевал align="justify".

Как стилизовать HTML-тег `<legend>`

Элемент `<legend>` можно стилизовать с помощью стандартных свойств CSS, таких как padding, margin, background-color, text-align и font-weight, как показано в приведённом выше примере с CSS.

Практика

Какова основная функция HTML-тега <legend>?

Используется для создания поля ввода в форме.Предоставляет подпись для элемента <fieldset>.Предоставляет подпись для элемента <table>.Используется для группировки связанных элементов в форме.