<legend>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023