<fieldset>: The Field Set element

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

<form> <fieldset> <legend>Choose your favorite monster</legend> <input type="radio" id="kraken" name="monster" value="K" /> <label for="kraken">Kraken</label><br /> <input type="radio" id="sasquatch" name="monster" value="S" /> <label for="sasquatch">Sasquatch</label><br /> <input type="radio" id="mothman" 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" 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> 

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

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

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

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

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