--- title: '

: The Field Set element' slug: Web/HTML/Element/fieldset translation_of: Web/HTML/Element/fieldset ---

HTML-элемент <fieldset> используется для группировки нескольких элементов управления без веб-форм.

{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}

Пример выше показывает, как элемент <fieldset> группирует части HTML-формы, а вложенный элемент {{htmlelement("legend")}} даёт заголовок для <fieldset>. Он может иметь несколько атрибутов, самый используемый из них form, который содержит id формы {{htmlelement("form")}} на этой же странице. Этот атрибут позволяет сделать <fieldset> частью формы <form> даже если он не находится внутри неё. Также вы можете отключить <fieldset> и всё его содержимое с помощью атрибута disabled.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}: Если этот логический атрибут установлен, все элементы управления формой, вложенные в <fieldset> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <form>, в отличие от атрибута {{htmlattrdef("disabled")}} на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.
{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}: Этот атрибут принимает значение атрибута id элемента {{HTMLElement("form")}}, с которой вам нужно связать <fieldset>, даже если он находится вне формы.
{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}: Имя, связанное с группой.
Примечание: Заголовок для <fieldset> устанавливается первым {{HTMLElement("legend")}} внутри него.

Стилизация с CSS

Есть несколько особенностей стилизации <fieldset>.

По умолчанию, значение свойства {{cssxref("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, контент форм, явный контент.
Разрешённый контент	Необязательный элемент {{HTMLElement("legend")}}, следующий в основном потоке.
Пропуск тегов	{{no_tag_omission}}
Разрешённые родители	Любой элемент основного потока
Разрешённые ARIA roles	{{ARIARole("group")}}, {{ARIARole("presentation")}}
Взаимодействие с DOM	{{domxref("HTMLFieldSetElement")}}

Спецификации

Specification	Status	Comment
{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}	{{Spec2('HTML WHATWG')}}	Определение элемента `fieldset`
{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}	{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}	{{Spec2('HTML4.01')}}	Изначальное определение