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

Связь между label и input можно сделать двумя способами:

1. Обернуть input в label (неявная связь):

<label>
  Имя:
  <input type="text">
</label>

2. Использовать атрибут for в label и id в input (явная связь):

<label for="username">Имя:</label>
<input type="text" id="username">

Преимущества:

• Улучшает доступность (скринридеры лучше понимают связь)
• Клик по label фокусирует соответствующий input
• Работает для чекбоксов и радио-кнопок (увеличивает область клика)