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

{{HTMLSidebar}}

Елемент 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>
• Елемент <input>
• Елемент <label>
• Елемент <form>