for у label: точная связь подписи с полем
Атрибут for у label связывает текстовую подпись с элементом формы по его идентификатору id.
Назначение
Атрибут for у label связывает текстовую подпись с элементом формы по его идентификатору id.
Как это работает
Значения должны совпадать посимвольно, а id поля должен быть уникальным. Нажатие на подпись обычно переводит фокус в поле или переключает связанный флажок. Связь с name вместо id не работает.
Пример
<label for="contact-name">Как к вам обращаться</label>
<input id="contact-name" name="display_name" autocomplete="name">Что должно получиться
Подпись относится к contact-name, хотя ключ отправки называется display_name. Разделение id и name позволяет сохранять удобный контракт серверных данных.
Граница применения и частая ошибка
Не добавляйте в одну подпись несколько разных полей и не рассчитывайте на их одинаковое имя. Каждому отдельному контролу нужна ясная собственная подпись.
Самостоятельная проверка
Нажмите на текст подписи, затем измените id поля и наблюдайте потерю связи. Исправьте for и проверьте клавиатурную навигацию и доступное имя контрола.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.