<fieldset>: The Field Set element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML-элемент <fieldset>
используется для группировки нескольких элементов управления в веб-форме.
Интерактивный пример
Пример выше показывает, как элемент <fieldset>
группирует части HTML-формы, а вложенный элемент <legend>
даёт заголовок для <fieldset>
. Он может иметь несколько атрибутов, самый используемый из них form
, который содержит id
формы <form>
на этой же странице. Этот атрибут позволяет сделать <fieldset>
частью формы <form>
даже если он не находится внутри неё. Также вы можете отключить <fieldset>
и всё его содержимое с помощью атрибута disabled
.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
disabled
-
Если этот логический атрибут установлен, все элементы управления формой, вложенные в
<fieldset>
будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму<form>
, в отличие от атрибутаdisabled
на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента<legend>
не будут отключены. form
-
Этот атрибут принимает значение атрибута
id
элемента<form>
, с которой вам нужно связать<fieldset>
, даже если он находится вне формы. name
-
Имя, связанное с группой.
Примечание: Заголовок для <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-роли | group , presentation |
DOM-интерфейс | HTMLFieldSetElement |
Спецификации
Specification |
---|
HTML Standard # the-fieldset-element |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
-
Другие связанные элементы: