HTML таг label

Пример

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

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Имейл адрес</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="terms">
    <label class="form-check-label" for="terms">Съгласен съм с общите условия</label>
  </div>

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

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

Виж как се ползва тагът <label>.

Елементът <label> се използва за дефиниране на етикет (надпис) за елемент на формуляр, като <input>, <textarea>, <select> и др. Основната му цел е да подобри използваемостта и достъпността, като свързва текстовото описание с конкретно поле за въвеждане.

Има два основни начина за свързване на <label> с контрол на формата:

• Чрез атрибута for – стойността на for трябва да съвпада с атрибута id на съответния елемент на формата:

  <label for="username">Потребителско име</label>
  <input type="text" id="username" name="username">

• Чрез влагане – контролът на формата се поставя вътре в самия <label>:

  <label>
    <input type="checkbox" name="subscribe">
    Абонирай се за бюлетин
  </label>

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

Елементът <label> е инлайн елемент по подразбиране, но в контекста на Bootstrap често се използва с класове като .form-label или .form-check-label, които могат да променят начина му на визуализация и подравняване.

Browser Support

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

Атрибути