<label> - HTML-елемент для підпису до полів форми

HTML-елемент <label> представляє собою підпис для елемента вводу в користувацькому інтерфейсі. Він може бути пов'язаний з елементом керування або за допомогою атрибута for, або шляхом розміщення елемента керування всередині <label>.

Тег <label> покращує доступність та зручність використання форм. Коли користувач натискає на текст всередині <label>, фокус переміщується на пов'язаний з ним елемент вводу (<input>, <select>, <textarea>), або активує його (для checkbox та radio).

Існує два способи пов'язати <label> з елементом форми:

Явний зв'язок: за допомогою атрибута for, значення якого повинно відповідати id елемента форми. Це найнадійніший спосіб, який працює навіть якщо елементи не знаходяться поруч.
Неявний зв'язок: шляхом обгортання елемента форми тегом <label>. У цьому випадку атрибут for не є обов'язковим.

Для найкращої доступності рекомендується завжди використовувати явний зв'язок за допомогою атрибута for.

HTML
<label for="username">Ім’я користувача:</label>
<input type="text" id="username">

<label>
  Електронна пошта:
  <input type="email" name="email">
</label>

Атрибути

Цей тег може мати глобальні атрибути.

for: Атрибут id елемента форми, з яким пов’язаний цей підпис. Це дозволяє пов’язувати <label> з елементами, які не є його прямими нащадками.
form: Атрибут id форми, до якої належить цей підпис. Використовується, якщо підпис знаходиться поза тегом <form>.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, інтерактивний контент (якщо вказано атрибут `for`), відчутний контент.
Дозволений вміст	Фразовий контент, але без нащадків `<label>`. Елемент керування, пов’язаний з підписом, може бути нащадком.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент.
Роль ARIA	Немає відповідної ролі.
DOM інтерфейс	`HTMLLabelElement`

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

<label for="name">Ваше ім’я:</label>
<input type="text" id="name" name="name">

<label>
  <input type="checkbox" name="subscribe" value="yes">
  Підписатися на розсилку
</label>

Стилі за замовчуванням

CSS
label {
  cursor: default;
}

Підтримка браузерів



`<label>`
`for`