HTML таг `fieldset`

Пример

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

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

    <div class="mb-3">
      <label for="firstName" class="form-label">Име</label>
      <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Иван">
    </div>

    <div class="mb-3">
      <label for="lastName" class="form-label">Фамилия</label>
      <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Иванов">
    </div>

    <button type="submit" class="btn btn-primary">Изпрати</button>
  </fieldset>
</form>

Опитай в редактора

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

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

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

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

Елементът поддържа глобалните HTML атрибути (като id, class, style, title и др.), както и атрибута disabled, който деактивира всички контролни елементи в рамките на <fieldset>. Когато disabled е зададен, вложените полета не могат да бъдат фокусирани и не се изпращат с формуляра.

В комбинация с Bootstrap 5.3, <fieldset> може да се стилизира чрез помощни класове (напр. border, p-3, mb-3) и да се интегрира безпроблемно с класовете за формуляри (.form-control, .form-label и др.), като по този начин се постига едновременно семантично коректен и визуално консистентен интерфейс.

Browser Support

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

Атрибути

Този елемент няма специфични атрибути.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг fieldset