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

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>

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

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

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

Specification
HTML
# the-fieldset-element

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fieldset
disabled
form
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Has more compatibility info.

Смотрите также