<fieldset> элемент HTML <fieldset>

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

Попробуйте

<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: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

Как показано в примере выше, элемент <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

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

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

Стилизация с помощью CSS

При стилизации <fieldset> следует учитывать несколько особенностей.

По умолчанию значение display равно block, и элемент создаёт контекст блочного форматирования. Если для <fieldset> задано строчное значение display, он будет вести себя как 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>