Как связать теги label и input?

label связывают с input атрибутом `for`, совпадающим с `id` поля, или вложением поля внутрь label.

Через for и id

<label for="email">Email</label>
<input id="email" type="email" name="email" />

Вложением

<label>
  Email
  <input type="email" name="email" />
</label>

Зачем связывать

• Скринридер объявит подпись при фокусе на поле.
• Клик по подписи ставит фокус в поле (а для чекбокса — переключает его) — больше область клика.
• Автозаполнение браузера лучше понимает поле.

В React

Атрибут называется htmlFor, а уникальный id генерируют через useId():

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} type="email" />

Чего не делать

Не заменять label атрибутом placeholder — подсказка исчезает при вводе и плохо читается скринридерами.

Коротко для собеседования

<label for="id"> + <input id="id"> или поле внутри label; это даёт озвучивание подписи и фокус по клику, в React — htmlFor и useId.

Подробнее: MDN — label