<fieldset>: Элемент группы полей

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

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

Этот элемент включает глобальные атрибуты.

disabled

Если этот булевый атрибут установлен, все элементы управления формой, являющиеся потомками <fieldset>, отключаются, то есть они не могут быть изменены и не будут отправлены вместе с <form>. Они не будут получать никакие события навигации, такие как щелчки мышью или события, связанные с фокусом. По умолчанию браузеры отображают такие элементы серым цветом. Обратите внимание, что элементы формы внутри элемента <legend> не будут отключены.

form

Этот атрибут принимает значение атрибута id элемента <form>, к которому вы хотите, чтобы <fieldset> относилась, даже если она не находится внутри формы. Обратите внимание, что использование этого атрибута может быть запутанным — если вы хотите, чтобы элементы <input> внутри <fieldset> были связаны с формой, вам нужно использовать атрибут form непосредственно на этих элементах. Вы можете проверить, какие элементы связаны с формой через JavaScript, используя HTMLFormElement.elements.

name

Имя, связанное с группой.

Примечание: Заголовок для fieldset задается первым элементом <legend> внутри него.

Существует несколько особых аспектов стилизации <fieldset>.

Его значение display по умолчанию равно block и он устанавливает блочный контекст форматирования. Если <fieldset> стилизован с значением display для inline, он будет вести себя как inline-block, иначе как block. По умолчанию вокруг содержимого есть 2px groove граница и небольшое значение по умолчанию для отступов. У элемента есть min-inline-size: min-content по умолчанию.

Если присутствует <legend>, он размещается поверх block-start границы. <legend> «ужимается» и также устанавливает контекст форматирования. Значение display устанавливается как блочное. (Например, display: inline ведет себя как block.)

Будет анонимный бокс, содержащий содержимое <fieldset>, который наследует определенные свойства от <fieldset>. Если <fieldset> стилизован с display: grid или display: inline-grid, то анонимный бокс будет иметь контекст форматирования сетки. Если <fieldset> стилизован с display: flex или display: inline-flex, то анонимный бокс будет иметь контекст форматирования гибкой компоновки. В противном случае он устанавливает блочный контекст форматирования.

Вы можете настроить <fieldset> и <legend> любым способом, подходящим для вашего дизайна страницы.

В этом примере показан пример простого <fieldset> с <legend>, и одним элементом управления внутри.

<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

Результат

В этом примере показан отключенный <fieldset> с двумя элементами управления внутри. Обратите внимание, как оба элемента управления отключены из-за наличия отключенного <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Disabled login 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>

Результат

• Элемент <legend>
• Элемент <input>
• Элемент <label>
• Элемент <form>