Теги <fieldset> и <legend>: группы полей
Как связать несколько элементов формы общей подписью и не потерять подписи отдельных полей.
Зачем нужен этот элемент
fieldset объединяет связанные поля формы, а legend называет группу. Это особенно полезно для набора радиокнопок: общий вопрос относится ко всем вариантам, а отдельный label описывает каждый из них.
Нативная группировка помогает вспомогательным технологиям передавать контекст. Не заменяйте legend обычным жирным абзацем, если нужна именно общая подпись группы. Внешнюю рамку можно убрать CSS, сохранив семантическую связь.
Синтаксис и пример
<fieldset>
<legend>Что изучать первым?</legend>
<label><input type="radio" name="topic" value="html" checked> HTML</label>
<label><input type="radio" name="topic" value="css"> CSS</label>
</fieldset>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| legend | Подпись группы, обычно первый дочерний элемент. |
| disabled | Отключает большинство контролов внутри группы; для legend есть исключение. |
| label | По-прежнему нужен отдельным полям. |
Частая ошибка
Не задавайте разный name радиокнопкам одного выбора: тогда они перестанут быть взаимоисключающей группой.
Небольшая практика
Добавьте вариант «Публикация». Нажимайте стрелки при фокусе на радиогруппе и проверьте, что выбранным остаётся один вариант.
Разберите также <form>, <label>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.