<legend>

Что делает тег

Тег <legend> создаёт заголовок для элементов формы, сгруппированных в теге <fieldset>.

Синтаксис тега <legend>

<fieldset>
  <legend>Заголовок группы элементов формы</legend>
  <!-- элементы формы -->
</fieldset>

Спецификация HTML

Тег <legend> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <legend> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Заголовок для группы радиокнопок:

<fieldset>
  <legend>Выберите животное</legend>
  <label>
    <input type="radio" name="animal" value="dog"> Собака
  </label>
  <label>
    <input type="radio" name="animal" value="cat"> Кошка
  </label>
  <label>
    <input type="radio" name="animal" value="bird"> Птица
  </label>
</fieldset>

Заголовок для группы флажков:

<fieldset>
  <legend>Выберите языки программирования, которые вы знаете</legend>
  <label>
    <input type="checkbox" name="language" value="html"> HTML
  </label>
  <label>
    <input type="checkbox" name="language" value="css"> CSS
  </label>
  <label>
    <input type="checkbox" name="language" value="javascript"> JavaScript
  </label>
</fieldset>

Заголовок для группы инпутов:

<fieldset>
  <legend>Адрес доставки</legend>
  <label>
    Адрес:
    <input type="text" name="address">
  </label>
  <label>
    Город:
    <input type="text" name="city">
  </label>
  <label>
    Почтовый индекс:
    <input type="text" name="zip">
  </label>
</fieldset>

Использование тега <legend> для стилизации заголовка группы:

<fieldset>
  <legend><h2>Опции платежа</h2></legend>
  <label>
    <input type="radio" name="payment" value="credit-card"> Кредитная карта
  </label>
  <label>
    <input type="radio" name="payment" value="paypal"> PayPal
  </label>
</fieldset>

Для чего использовать тег <legend>

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

Атрибуты тега <legend>

Тег <legend> не имеет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

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

Поддержка браузерами

Тег <legend> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега <legend> не существует.

Чем заменить тег

Тег <legend> можно заменить на заголовок <h1> — <h6>.

Актуальность

Тег <legend> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.