<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 |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-fieldset-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fieldset
|
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 Так |
disabled
|
Chrome Full support Так | Edge Partial support 12 | Firefox Full support Так | Internet Explorer Full support Так | 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 Так |