HTML таг legend

Пример

Кратък пример как се използва тагът <legend>.

<form>
  <fieldset class="border p-3">
    <legend class="float-none w-auto px-2">Лична информация</legend>

    <div class="mb-3">
      <label for="name" class="form-label">Име</label>
      <input type="text" id="name" class="form-control" placeholder="Въведете име">
    </div>

    <div class="mb-3">
      <label for="email" class="form-label">Имейл</label>
      <input type="email" id="email" class="form-control" placeholder="Въведете имейл">
    </div>
  </fieldset>
</form>

Дефиниция и употреба

Тагът <legend> се използва за задаване на заглавие или описание на група формови елементи, дефинирани с <fieldset>. Той помага на потребителите да разберат какво съдържа групата полета и подобрява достъпността за помощни технологии (например екранни четци).

<legend> трябва да бъде първият директен дъщерен елемент на <fieldset>. Текстът в <legend> описва логическата група – например „Лична информация“, „Данни за доставка“, „Настройки на профила“ и др. Браузърите обикновено визуално свързват заглавието с рамката на <fieldset>, като го показват върху линията на рамката.

Елементът поддържа глобалните HTML атрибути (като id, class, style, title и др.), което позволява лесно стилизиране с CSS и интеграция с JavaScript. В контекста на Bootstrap може да се използват помощни класове (например px-2, fw-bold, text-primary), за да се постигне по-добър визуален резултат.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути