Групування полів

Групувати поля корисно для структурування форми, особливо якщо форма містить багато полів і потрібно її легко відформатувати та покращити зовнішній вигляд.

Елементи <fieldset> і <legend>

Елементи <fieldset> і <legend> використовують для групування пов'язаних елементів форми.

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

Елемент <legend> використовується всередині <fieldset> і вказує заголовок або опис групи полів форми. Він розміщується вгорі або знизу (в залежності від відображення браузера) групи полів і надає користувачеві контекст щодо вмісту групи.

<fieldset>
  <legend>Контактна інформація</legend>
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Електронна пошта:</label>
  <input type="email" id="email" name="email"><br>
</fieldset>

Групування з можливістю оформлення

Елементи <fieldset> і <legend> мають обмежені можливості оформлення. Тому на практиці елементи форми групують за допомогою <div> та атрибутів доступності role і aria-labelledby.

<div role="group" aria-labelledby="contact-details">
  <p id="contact-details">Enter information</p>
  
</div>

Атрибут role="group" вказує на те, що елементи всередині цього <div> є частиною групи.

Атрибут aria-labelledby="contact-details" містить ідентифікатор елемента з описом групи.