Тег <fieldset>

Тег <fieldset> (укр. — “група полів”) в HTML використовується для логічного об’єднання кількох елементів форм у межах одного блоку. Це корисно як з точки зору організації структури форми, так і для підвищення її доступності та зручності. Зазвичай тег <fieldset> поєднують із тегом <legend>, який надає заголовок для групи полів.

Атрибути

Специфічні атрибути

Тег <fieldset> має лише один специфічний атрибут:

Особисті дані Ім’я: Email:

  • disabled — якщо встановлено, усі елементи форми в межах <fieldset> стають неактивними (недоступними для взаємодії). Наприклад:
<fieldset disabled>
    <legend>Особисті дані</legend>
    <label>Ім’я: <input type="text" name="name"></label>
    <label>Email: <input type="email" name="email"></label>
</fieldset>
  • form — визначає ідентифікатор форми, до якої належить елемент <fieldset>, навіть якщо сам тег знаходиться поза межами цієї форми. Наприклад:
<form id="main-form"></form>

<fieldset form="main-form">
    <legend>Зовнішня секція</legend>
    <input type="text" name="external-field">
</fieldset>
  • name — встановлює ім’я групи полів. Це може бути корисно для скриптів, які обробляють форми. Наприклад:
<fieldset name="user-info">
    <legend>Інформація про користувача</legend>
    <input type="text" name="username">
</fieldset>

Глобальні атрибути

Тег <fieldset> підтримує всі глобальні атрибути HTML, зокрема:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<fieldset id="contact-info">
    <legend>Контактні дані</legend>
    <input type="text" name="phone" placeholder="Телефон">
</fieldset>
  • class — задає клас для стилізації елемента через CSS. Наприклад:
<fieldset class="form-section">
    <legend>Реєстрація</legend>
    <input type="text" name="login" placeholder="Логін">
</fieldset>
  • style — дозволяє додавати інлайн-стилі безпосередньо до елемента. Наприклад:
<fieldset style="border: 2px dashed #555; padding: 1em;">
    <legend>Параметри</legend>
    <input type="checkbox" name="subscribe"> Підписатися на новини
</fieldset>
  • title — текстова підказка, яка з’являється при наведенні на елемент. Наприклад:
<fieldset title="Розділ із персональною інформацією">
    <legend>Профіль</legend>
    <input type="text" name="username" placeholder="Ім’я користувача">
</fieldset>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання fieldset</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Особисті дані</legend>
            <label for="first-name">Ім’я:</label>
            <input type="text" id="first-name" name="first-name"><br><br>
            
            <label for="last-name">Прізвище:</label>
            <input type="text" id="last-name" name="last-name">
        </fieldset>

        <fieldset>
            <legend>Параметри підписки</legend>
            <label><input type="checkbox" name="news" value="yes"> Новини</label><br>
            <label><input type="checkbox" name="offers" value="yes"> Спеціальні пропозиції</label>
        </fieldset>

        <button type="submit">Надіслати</button>
    </form>
</body>
</html>

Додаткові моменти

  • Тег <fieldset> логічно групує пов’язані елементи, підвищуючи структурованість форми.
  • Разом із <legend> допомагає користувачам швидко зорієнтуватися в призначенні полів.
  • Підтримується всіма сучасними браузерами та покращує доступність для користувачів із порушеннями зору.
  • Використання атрибута disabled — ефективний спосіб тимчасово блокувати частину форми.
  • Атрибут disabled не блокує роботу вкладених тегів <fieldset>, якщо вони є. Їх потрібно вимикати окремо, якщо потрібно.