<fieldset>: The Field Set element
=================================

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

Интерактивный пример
--------------------

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

Атрибуты
--------

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

`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>` и единственным элементом управления внутри.


```html
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>
```

### Отключённый fieldset

Этот пример показывает отключённый `<fieldset>` с двумя элементами управления внутри.


```html
<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>
```

Техническая сводка
------------------

| Категории контента (en-US) | Основной поток, корневой раздел, listed (en-US), контент форм, явный контент. |
| --- | --- |
| Допустимое содержимое | Необязательный элемент `<legend>`, следующий в основном потоке. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент основного потока |
| Допустимые ARIA-роли | `group (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLFieldSetElement` (en-US) |

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

| Specification |
| --- |
| HTML Standard # the-fieldset-element |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Другие связанные элементы:
    + `<form>`
    + `<legend>`
    + `<label>`
    + `<button>`
    + `<select>`
    + `<datalist>`
    + `<optgroup>`
    + `<option>`
    + `<textarea>` (en-US)
    + `<input>`
    + `<output>`
    + `<progress>`
    + `<meter>`