<fieldset> Елемент групування полів форми в HTML

Елемент <fieldset> в HTML використовується для групування декількох елементів керування, а також <label> в межах веб-форми.

<fieldset> є потужним інструментом для покращення структури та доступності веб-форм. Він дозволяє групувати пов'язані поля форми, що робить форму більш організованою та зрозумілою для користувачів, особливо для тих, хто використовує допоміжні технології, такі як екранні зчитувачі.

Зазвичай <fieldset> використовується разом з елементом <legend>, який надає заголовок для групи полів.

Тег fieldset приклад використання в HTML

HTML
<fieldset>...</fieldset>

Атрибути

Цей тег може мати глобальні атрибути.

disabled: Якщо цей булевий атрибут встановлено, всі елементи форми, що є нащадками <fieldset>, вимикаються. Вони не можуть бути відредаговані або сфокусовані, і не будуть відправлені разом з формою. Вони не отримають жодних подій перегляду, таких як кліки миші або події фокусування.
form: Цей атрибут містить `id` форми, до якої належить <fieldset>. Це дозволяє розміщувати <fieldset> будь-де на сторінці, а не лише як нащадка форми.
name: Надає ім’я для групи полів. Це ім’я може бути використане в JavaScript для доступу до елементів групи.

Технічне резюме

Категорія контенту	Потоковий контент, відчутний контент.
Дозволений вміст	Один необов’язковий елемент `<legend>`, за яким слідує потоковий вміст.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий вміст.
Роль ARIA	`group`
Дозволені ARIA атрибути	`radiogroup` `presentation` `none`
DOM інтерфейс	`HTMLFieldSetElement`

Приклади використання

<form>
  <fieldset>
    <legend>Оберіть ваш улюблений напій:</legend>
    <div>
      <input type="radio" id="coffee" name="drink" value="coffee">
      <label for="coffee">Кава</label>
    </div>
    <div>
      <input type="radio" id="tea" name="drink" value="tea">
      <label for="tea">Чай</label>
    </div>
    <div>
      <input type="radio" id="juice" name="drink" value="juice">
      <label for="juice">Сік</label>
    </div>
  </fieldset>
</form>

form {
  font-family: Arial, sans-serif;
}
fieldset {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1rem;
}
legend {
  padding: 0 0.5rem;
  font-weight: bold;
}
div {
  margin-bottom: 0.5rem;
}

Стилі за замовчуванням

CSS
fieldset {
  display: block;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
}

Підтримка браузерів



`<fieldset>`
`disabled`
`form`
`name`