<fieldset>: The Field Set element

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

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

Пример выше показывает, как элемент <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>' в этой спецификации.
Рекомендация Изначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
fieldsetChrome Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Edge Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 4511145.
Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Safari Полная поддержка ДаWebView Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Chrome Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
disabledChrome Полная поддержка ДаEdge Частичная поддержка Частичная
Замечания
Частичная поддержка Частичная
Замечания
Замечания Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox Полная поддержка ДаIE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
Opera Полная поддержка 12Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
formChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
nameChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

See also