Що робить <label>? Як <label> пов'язується з полем вводу?

HTMLJunior~1 хв читання

Елемент <label> використовується для створення підпису до елемента форми (наприклад, до <input>, <select>, <textarea>). Він робить інтерфейс зручнішим і зрозумілішим: користувач бачить, до якого поля належить текст, і може клацнути на напис, щоб активувати це поле.

1. Приклад базового використання

html

<form>
  <label for="email">Ваш email:</label>
  <input type="email" id="email" name="user_email">
</form>

Що відбувається:

<label> містить текст "Ваш email:";
атрибут for="email" вказує, з яким полем пов'язаний цей ярлик;
id="email" у поля - це ідентифікатор, на який посилається for.

Результат: під час клацання на текст "Ваш email" фокус автоматично переходить у поле вводу.

2. Як працює зв'язок

Зв'язок між <label> і елементом форми відбувається через атрибут for і значення id.

Що у `<label>`	Що в елемента форми
`for="email"`	`id="email"`

Схема:

html

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

<label> "прикріплений" до поля з id="username".

3. Альтернативний спосіб - без for

Можна просто вкласти елемент вводу всередину <label>. Тоді зв'язок встановлюється автоматично:

html

<label>
  <input type="checkbox" name="agree">
  Я погоджуюся з умовами
</label>

Тут, клацаючи на текст, користувач також активує чекбокс.

Цей спосіб зручний для коротких підписів (checkbox, radio).

4. Чому важливий

Покращує юзабіліті: клацаючи по тексту, можна активувати поле, зручно на мобільних.
Підвищує доступність: програми читання з екрана озвучують label, коли користувач переміщується формою.
Покращує зрозумілість форми: текст і поле візуально пов'язані.
Не потребує JavaScript, усе працює на рівні HTML.

5. Приклади для різних полів

Текстове поле:

html

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

Перемикачі (radio):

html

<label>
  <input type="radio" name="gender" value="male">
  Чоловік
</label>
<label>
  <input type="radio" name="gender" value="female">
  Жінка
</label>

Прапорець (checkbox):

html

<label>
  <input type="checkbox" name="agree">
  Я приймаю умови
</label>

Підсумок:

Елемент	Призначення
`<label>`	Підпис до елемента форми
`for`	Вказує, з яким елементом пов'язаний ярлик
`id` у поля	Має збігатися з `for`
Альтернатива	Можна вкласти поле всередину `<label>`
Користь	Покращує доступність, клікабельність і зручність

Простими словами: <label> - це ярлик для поля. Він каже користувачу: "введи ось сюди", а браузеру: "пов'яжи цей текст з конкретним елементом форми".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.