Тег <legend>

Описание

Тег <legend> создает заголовок для группы элементов формы, объединенных тегом <fieldset>. Обеспечивает семантическую связь и улучшает доступность формы.

Группировка полей формы:
<fieldset> <legend>Контактная информация</legend> <label>Имя: <input type="text"></label> <label>Email: <input type="email"></label> </fieldset>
Радио-кнопки с группой:
<fieldset> <legend>Выберите способ оплаты:</legend> <label><input type="radio" name="payment"> Кредитная карта</label> <label><input type="radio" name="payment"> PayPal</label> <label><input type="radio" name="payment"> Наличные</label> </fieldset>

Ключевые особенности:

  • Должен быть первым элементом внутри <fieldset>
  • По умолчанию отображается в верхней границе fieldset
  • Поддерживает все фразовые элементы (текст, ссылки, span)
  • Важен для доступности (скринридеры объявляют группу полей)
  • Улучшает семантическую структуру сложных форм

Рекомендации по использованию:

  • Всегда добавляйте осмысленный заголовок для группы полей
  • Делайте текст кратким, но информативным
  • Для обязательных групп добавьте звездочку (*) в legend
  • Избегайте сложной разметки внутри legend
  • Сочетайте с ARIA-атрибутами для сложных случаев
Пример с иконкой:
<style> .icon-legend::before { content: "📧 "; font-size: 1.1em; } </style> <fieldset> <legend class="icon-legend">Подписка на рассылку</legend> <label><input type="checkbox"> Новости</label> <label><input type="checkbox"> Акции</label> </fieldset>

Тег <legend> значительно улучшает организацию и доступность групп полей в сложных HTML-формах.

Атрибуты

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