Тег legend (от английского legend, «подпись», «пояснение») задаёт заголовок группы полей внутри fieldset. Браузер размещает его на верхней рамке группы, а программы чтения с экрана используют текст как название всей группы. Тег записывают первым внутри fieldset, а закрывающий </legend> обязателен.
Заголовок относится к группе, которую задаёт тег fieldset, а в группе находятся поля из тега input и других тегов, а надписи к ним задаёт тег label. Основы разобраны в уроке про группировку полей.
<fieldset>
<legend>Получение</legend>
<label><input type="radio" name="delivery" value="courier"> Курьер</label>
<label><input type="radio" name="delivery" value="post"> Почта</label>
</fieldset>В этой статье
- Тег legend в HTML: что это и для чего нужен
- Где записывают legend: первый ребёнок fieldset
- Что записывают внутри legend: текст, h3, поле и img
- Положение legend: рамка, margin и text-align
- Legend вне рамки: float и position
- Тег legend и JavaScript: form, parentElement и align
- Доступность legend: название группы
- Атрибуты тега legend
- Вопросы про тег legend: одно поле и скрытый заголовок
- Частые ошибки с тегом legend
Тег legend в HTML: что это и для чего нужен
Заголовок нужен, чтобы пользователь понимал, к чему относятся поля группы, например варианты ответа на один вопрос. Для программы чтения текст legend становится названием всей группы, а не отдельного поля: название поля задаёт label. Внешне заголовок находится на верхней рамке, и линия рамки вокруг него прерывается. У тега нет собственных атрибутов, только глобальные.
<fieldset>
<legend>Контакты</legend>
<input name="email" type="email">
<input name="phone" type="tel">
</fieldset>Пример: fieldset без legend и с ним
Выберите запись: под результатом положение заголовка и название группы.
Где записывают legend: первый ребёнок fieldset
Заголовком группы браузер считает первый legend, который является прямым дочерним элементом fieldset. Если записать его после поля, он всё равно появится на рамке, но проверка HTML сообщает об ошибке, поэтому legend пишут первым. Внутри div он становится обычным блоком, на рамку не попадает и названия группы не даёт. Второй legend тоже выводится обычным блоком под первым. Вне fieldset тег теряет особый вид и роль. Проверка HTML допускает legend и внутри optgroup, подробнее на странице про тег optgroup.
<fieldset>
<legend>Адрес</legend>
<input name="city">
</fieldset>Пример: где записан legend
Выберите запись: под результатом положение каждого legend и название группы.
Что записывают внутри legend: текст, h3, поле и img
Внутри legend допустимы текст, строчные теги (span, b, a, img), заголовки от h1 до h6 и поле формы. Блочные div, p и ul проверка HTML считает ошибкой. Название группы складывается из всего содержимого: текста, alt картинки и надписи флажка. Поле в первом legend не отключается вместе с группой, это описано на странице про тег fieldset.
<fieldset disabled>
<legend>
<label><input type="checkbox" name="on"> Включить</label>
</legend>
<input name="city">
</fieldset>Пример: что допустимо внутри legend
Выберите запись: под результатом название группы и состояние полей.
Положение legend: рамка, margin и text-align
По умолчанию legend занимает ширину своего текста и стоит на верхней рамке слева. Сдвигают его через margin: margin: 0 auto выравнивает по центру, а margin-left: auto прижимает вправо. Свойство text-align у самого legend тоже сдвигает блок: center выравнивает заголовок по центру, right прижимает вправо. Если задать text-align: center у fieldset, заголовок окажется по центру вместе с остальным содержимым. Фон и padding оформляют заголовок плашкой. Атрибут align устарел: проверка HTML выдаёт предупреждение, хотя браузер его ещё выполняет.
legend {
margin: 0 auto;
}Пример: margin, text-align и оформление
Выберите запись: под результатом смещение и ширина legend.
Legend вне рамки: float и position
Чтобы заголовок не находился на рамке, ему задают float: left: он уходит внутрь группы, а содержимое его обтекает. Пара float: left; width: 100% делает обычный заголовок во всю ширину внутри рамки. Значение position: relative сдвигает заголовок, а position: absolute выводит из потока, и содержимое группы больше не отступает под него. Свойство display не действует: браузер всегда делает legend блочным, и вычисленное значение остаётся block.
legend {
float: left;
width: 100%;
padding: 0;
}Пример: float, position и display
Выберите запись: под результатом display и смещение legend.
Тег legend и JavaScript: form, parentElement и align
Свойство legend.form возвращает форму, в которой находится fieldset, или null, если формы нет. Свойство parentElement показывает родителя: для настоящего заголовка группы это fieldset. Первый legend группы находят селектором :scope > legend, а текст меняют через textContent. Свойство align существует, но устарело.
const fieldset = document.querySelector("fieldset");
const legend = fieldset.querySelector(":scope > legend");
console.log(legend.form);
legend.textContent = "Адрес";Пример: form, parentElement и textContent
Выберите запись: под результатом ответ скрипта.
Доступность legend: название группы
Название группы берётся из первого legend, который является дочерним элементом fieldset. Остальные legend в название не входят, а legend внутри div названия не даёт. Атрибуты aria-label и aria-labelledby у fieldset главнее legend. Скрытый только визуально legend остаётся названием группы, а пустой названия не даёт. Текст заголовка делают коротким, как вопрос к вариантам: программы чтения обычно произносят его вместе с полями группы.
<fieldset aria-label="Способ">
<legend>Получение</legend>
<label><input type="radio" name="d"> Курьер</label>
</fieldset>Пример: откуда берётся название группы
Выберите запись: под результатом название группы для программы чтения с экрана.
Атрибуты тега legend
У legend нет собственных атрибутов, только глобальные. Устаревший align и несуществующие атрибуты проверка HTML отмечает: часть из них знакома по полям формы, но у legend они не работают.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
align | устарел | Выравнивание заголовка, вместо него используют CSS | align="right" |
accesskey | глобальный | Клавиша быстрого доступа | accesskey="g" |
class | глобальный | Класс для оформления | class="title" |
id | глобальный | Идентификатор заголовка, например для aria-labelledby | id="group-title" |
style | глобальный | Встроенные стили | style="color: red" |
title | глобальный | Всплывающая подсказка | title="Обязательно" |
for | не существует | Связь с полем задаёт label | for="city" |
name | не существует | Название группы задают у fieldset | name="address" |
value | не существует | У заголовка нет значения | value="1" |
form | не существует | Форму указывают у fieldset и полей | form="order" |
role | не допускается | Роль заголовку не задают, даже none | role="heading" |
Вопросы про тег legend: одно поле и скрытый заголовок
Заголовок группы нередко записывают для одного поля и прячут не теми способами: нужен ли legend для одного поля и как скрыть заголовок только визуально.
Нужен ли legend для одного поля?
Нет. Название одного поля задаёт label, а legend нужен группе из нескольких полей, например вариантам ответа на один вопрос. Если обернуть одно поле в fieldset с legend, название получит группа из одного поля, а само поле останется без названия.
<label for="email">Почта</label>
<input id="email" name="email">Пример: label, legend для поля и группа вариантов
Выберите запись: под результатом название группы и поля.
Как скрыть legend визуально, но сохранить название группы?
Заголовок прячут классом для визуально скрытого текста: абсолютное положение, минимальные размеры, overflow: hidden и clip. Блок остаётся на странице, поэтому название группы сохраняется, а на экране заголовка нет.
.vh {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}Пример: обычный и скрытый legend
Выберите запись: под результатом размер legend и название группы.
Частые ошибки с тегом legend
Ошибки с заголовком чаще всего связаны с местом записи и содержимым.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
legend вне fieldset | Обычный блок без роли заголовка группы, проверка HTML сообщает об ошибке | Записать legend первым внутри fieldset |
legend внутри div в fieldset | Обычный блок, названия группы нет, проверка HTML сообщает об ошибке | Убрать div: legend должен быть прямым дочерним элементом fieldset |
legend после поля | Браузер рисует его на рамке, но проверка HTML сообщает об ошибке | Записать legend первым |
Два legend в одном fieldset | Второй выводится обычным блоком, проверка HTML сообщает об ошибке | Использовать один legend |
div, p или ul внутри legend | Запись недопустима, проверка HTML сообщает об ошибке | Использовать текст, span или заголовок от h1 до h6 |
legend вместо label для одного поля | Название получает группа, а поле остаётся без названия | Использовать label |
role, for или name у legend | Атрибуты не допускаются, проверка HTML сообщает об ошибке | Задавать название группы через aria-label у fieldset |
Атрибут align для выравнивания | Атрибут устарел, проверка HTML выдаёт предупреждение | Использовать margin или text-align у fieldset |
text-align: justify у legend | Нужен только переносимому заголовку: у короткого legend в одну строку выравнивание ничего не меняет | Для сдвига использовать center, right или margin |
