<fieldset>
- 25 января 2023
Тег <fieldset>
используется для группирования элементов формы в логически связанные блоки. Это позволяет разделить форму на более понятные и логические части, что упрощает её использование для пользователей.
Кроме того, <fieldset>
используется вместе с тегом <legend>
, который позволяет добавить заголовок для каждого блока.
Синтаксис тега <fieldset>
<fieldset>
<legend>Заголовок блока</legend>
<!-- Элементы формы -->
</fieldset>
Спецификация HTML
<fieldset>
является актуальным тегом и поддерживается всеми современными браузерами.
Семантический или нет
Тег <fieldset>
является семантическим, так как он улучшает доступность формы для пользователей и позволяет разделить форму на более понятные блоки.
Пример использования
<form>
<fieldset>
<legend>Личные данные</legend>
<label>
Имя:
<input type="text" name="first_name">
</label>
<label>
Фамилия:
<input type="text" name="last_name">
</label>
</fieldset>
</form>
<fieldset>
используется для группирования элементов формы в блоки по смыслу<legend>
используется для добавления заголовка для каждого блока
Блоки могут содержать любые элементы формы: текстовые поля, переключатели, флажки, список выбора и другие элементы.
Для чего использовать тег <fieldset>
- Создание формы для ввода контактной информации с помощью
<fieldset>
и<legend>
. - Группировка элементов формы, которые относятся к одной категории, например, кредитных карт, с помощью
<fieldset>
и<legend>
. - Создание разделов формы для поиска с использованием
<fieldset>
и<legend>
для разделения категорий поиска, таких как местоположение, тип объекта и т. д.
Атрибуты тега <fieldset>
disabled
— указывает, что группа элементов формы должна быть отключена.form
— указывает форму, к которой относится группа элементов формы.name
— задает имя группы элементов формы.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <fieldset>
не может быть вложен в тег <legend>
. Также не рекомендуется использовать тег <fieldset>
внутри тега <table>
.
Поддержка браузерами
Тег <fieldset>
поддерживается всеми современными браузерами.
Альтернативные теги
Вместо тега <fieldset>
можно использовать тег <data>
или <section>
, но в этом случае потребуется дополнительный CSS-код для создания рамки вокруг группы элементов формы.
Актуальность
Тег <fieldset>
актуален и широко используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023