<fieldset> – Елемент набору полів

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

Спробуйте його в дії

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

Атрибути

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

disabled

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

form

Цей атрибут приймає значення атрибута id елемента форми, частиною якої повинен стати <fieldset>, навіть якщо він не вкладений у неї. Зверніть увагу, що використання цього атрибута заплутує: якщо ви хочете, щоб елементи <input>, які знаходяться всередині <fieldset>, були пов'язані з тією ж формою, потрібно використовувати атрибут form безпосередньо на цих елементах. Перевірити, які елементи пов'язані з формою, можна за допомогою JavaScript, використовуючи HTMLFormElement.elements.

name

Ім'я, пов'язане з групою.

Примітка: Підпис для <fieldset> задається першим вкладеним в нього елементом <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

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

<form action="#">
  <fieldset>
    <legend>Ви згодні?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Так!" />
    <label for="chbx">Я погоджуюся</label>
  </fieldset>
</form>

Результат

Вимкнений fieldset

Цей приклад демонструє вимкнений <fieldset> з двома контрольними елементами всередині нього. Зверніть увагу, що обидва контрольні елементи вимкнені, тому що вони перебувають всередині вимкненого <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Вимкнений fieldset для входу</legend>
    <div>
      <label for="name">Ім'я: </label>
      <input type="text" id="name" value="Сергій" />
    </div>
    <div>
      <label for="pwd">Архетип: </label>
      <input type="password" id="pwd" value="Лісовик" />
    </div>
  </fieldset>
</form>

Результат

Технічний підсумок

Категорії вмісту Потоковий вміст, розділовий корінь, перелічений, формовий елемент, відчутний вміст.
Дозволений вміст Необов'язковий елемент <legend>, за яким слідує потоковий вміст.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Всі елементи, що приймають потоковий вміст.
Неявна роль ARIA group
Дозволені ролі ARIA radiogroup, presentation, none
Інтерфейс DOM HTMLFieldSetElement

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
fieldset
Chrome Full support Так
footnote
Edge Full support 12
footnote
Firefox Full support Так
Internet Explorer Full support Так
Opera Full support Так
footnote
Safari Full support Так
WebView Android Full support Так
footnote
Chrome Android Full support Так
footnote
Firefox for Android Full support Так
Opera Android Full support Так
footnote
Safari on iOS Full support Так
Samsung Internet Full support Так
footnote
disabled
Chrome Full support Так
Edge Partial support 12
footnote
Firefox Full support Так
Internet Explorer Full support Так
footnote
Opera Full support 12
Safari Full support 6
WebView Android Full support 4.4
Chrome Android Full support Так
Firefox for Android Full support Так
Opera Android Сумісність невідома; будь ласка, оновіть. ?
Safari on iOS Full support 6
Samsung Internet Full support Так
form
Chrome Full support Так
Edge Full support 12
Firefox Full support Так
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support Так
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
name
Chrome Full support Так
Edge Full support 12
Firefox Full support Так
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support Так
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так

Дивіться також