Підпис форми в HTML

Вивчаємо тег legend для створення підпису групи полів форми за допомогою fieldset.

Підпис форми в HTML

Для створення заголовка або підпису групи полів форми використовується тег legend. Він завжди використовується разом із тегом fieldset.

fieldset — групує пов'язані елементи форми.
legend — задає назву або опис цієї групи.
legend повинен бути першим дочірнім елементом fieldset.

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

<fieldset>

  <legend>
    Особисті дані
  </legend>

  <label>
    Ім'я:
    <input type="text">
  </label>

  <br>

  <label>
    Прізвище:
    <input type="text">
  </label>

</fieldset>

<form>

  <fieldset>

    <legend>
      Контактна інформація
    </legend>

    <label>
      Email:
      <input type="email">
    </label>

    <br>

    <label>
      Телефон:
      <input type="tel">
    </label>

  </fieldset>

</form>

Стилізація legend через CSS

Тег legend можна оформити за допомогою CSS так само, як звичайний текстовий елемент.

fieldset {
  border: 2px solid #333;
  padding: 20px;
}

legend {
  font-size: 20px;
  font-weight: bold;
  color: blue;
}

❗ Важливо:

fieldset і legend покращують структуру форми, роблять її зрозумілішою для користувачів та допомагають технологіям доступності правильно читати форму.

Практичне завдання

📌 Завдання:

№1. Створіть форму реєстрації.
№2. Об'єднайте поля користувача через fieldset.
№3. Додайте підпис групи за допомогою legend.

<!-- Початковий код -->

<form>

  <input type="text">

  <input type="email">

</form>

💡 Показати підказку

Спочатку створіть fieldset, а вже всередину нього додайте legend та поля форми.

✅ Показати відповідь

<form>

  <fieldset>

    <legend>
      Реєстрація
    </legend>

    <label>
      Ім'я:
      <input type="text">
    </label>

    <br>

    <label>
      Email:
      <input type="email">
    </label>

  </fieldset>

</form>