HTML-элемент <fieldset>
используется для группировки нескольких элементов управления без веб-форм.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Пример выше показывает, как элемент <fieldset>
группирует части HTML-формы, а вложенный элемент <legend>
даёт заголовок для <fieldset>
. Он может иметь несколько атрибутов, самый используемый из них form
, который содержит id
формы <form>
на этой же странице. Этот артибут позволяет сделать <fieldset>
частью формы <form>
даже если он не находится внутри неё. Также вы можете отключить <fieldset>
и всё его содержимое с помощью атрибута disabled
.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
disabled
HTML5- Если этот логический атрибут установлен, все элементы управления формой, вложенные в
<fieldset>
будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму<form>
, в отличие от атрибутаdisabled
на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По-умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента<legend>
не будут отключены. form
HTML5- Этот атрибут принимает значение атрибута
id
элемента<form>
, с которой вам нужно связать<fieldset>
, даже если он находится вне формы. name
HTML5- Имя, связанное с группой.
Примечание: Заголовок для <fieldset> устанавливается первым
<legend>
внутри него.
Стилизация с CSS
Есть несколько особенностей стилизации <fieldset>
.
По-умолчанию, значение свойства display
равняется block
, что создаёт блочный контекст форматирования. Если установить значение display
как inline-элементу <fieldset>
, это будет работать как inline-block
, в ином случае, это будет работать как block
. По-умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет min-inline-size: min-content
по-умолчанию.
Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение display
блочное (например, display: inline
работает как block
).
Требуется перевод с четвёртого абзаца и ниже
Примеры
Простой fieldset
Этот пример показывает простой <fieldset>
с <legend>
и единственным элементом управления внутри.
<form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio" id="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form>
Отключенный fieldset
Этот пример показывает отключенный <fieldset>
с двумя элементами управления внутри.
<form action="#">
<fieldset disabled>
<legend>Disabled fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie">
</div>
</fieldset>
</form>
Техническая сводка
Категории контента | Основной поток, корневой раздел, listed, контент форм, явный контент. |
---|---|
Разрешённый контент | Необязательный элемент <legend> , следующий в основном потоке. |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Разрешённые родители | Любой элемент основного потока |
Разрешённые ARIA roles | group , presentation |
Взаимодействие с DOM | HTMLFieldSetElement |
Спецификации
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение '<fieldset>' в этой спецификации. |
Живой стандарт | Определение элемента fieldset |
HTML5 Определение '<fieldset>' в этой спецификации. |
Рекомендация | |
HTML 4.01 Specification Определение '<fieldset>' в этой спецификации. |
Рекомендация | Изначальное определение |
Совместимость с браузерами
BCD tables only load in the browser
See also
- Другие связанные элементы: