Коли елементи пов’язані між собою, доцільно їх групувати, оскільки це допомагає користувачу краще зрозуміти форму та дозволяє зосередитися на менших, структурованих наборах полів замість спроби охопити всю форму одразу. Групування можна здійснювати як візуально на інтерфейсі, так і логічно в коді.

Елементи fieldset та legend

Ви можете використовувати елемент <fieldset> для групування кількох пов’язаних елементів форми разом. Він забезпечує контейнер для цих елементів, а для додавання заголовка групи можна використати вкладений елемент <legend>. Важливо групувати пов’язані перемикачі (radio buttons) і прапорці (checkboxes), а також інші типи полів за необхідності. Це сприяє покращенню організації та зрозумілості форми для користувача.

Приклад

У цьому прикладі використовується елемент fieldset для групування пов'язаних елементів керування формою разом і елемент legend для надання підпису цій групі. Приклад зосереджений на формі вибору продуктів, де користувачі можуть обрати декілька товарів.

• fieldset групує прапорці разом, роблячи форму більш організованою та зрозумілою для користувача;

• legend надає заголовок, повідомляючи користувачу, що цей розділ призначений для вибору продуктів;

• Прапорці дозволяють користувачу вибрати декілька продуктів із доступних варіантів. Кожен варіант відповідає певному продукту (овочі, фрукти, молочні продукти).

Примітка

Вітаємо з завершенням курсу HTML! Ви дійшли до фінального розділу й тепер маєте міцну базу у веб-розробці. Якщо бажаєте продовжити вивчення цієї сфери, зверніть увагу на CSS — мова стилізації та дизайну веб-сторінок. Розвивайте свої навички та відкривайте безмежні можливості для створення привабливих сайтів.