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

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

<form>  <fieldset>    <legend>Choose your favorite monster</legend>    <input type="radio" name="monster" value="K" />    <label for="kraken">Kraken</label><br />    <input type="radio" name="monster" value="S" />    <label for="sasquatch">Sasquatch</label><br />    <input type="radio" name="monster" value="M" />    <label for="mothman">Mothman</label>  </fieldset></form>

legend {  background-color: #000;  color: #fff;  padding: 3px 6px;}input {  margin: 0.4rem;}

Пример выше показывает, как элемент<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" />    <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" value="Chris" />    </div>    <div>      <label for="pwd">Archetype: </label>      <input type="password" value="Wookie" />    </div>  </fieldset></form>

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

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

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

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

• Другие связанные элементы:
  • <form>
  • <legend>
  • <label>
  • <button>
  • <select>
  • <datalist>
  • <optgroup>
  • <option>
  • <textarea>
  • <input>
  • <output>
  • <progress>
  • <meter>