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

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

Связь между label и input можно сделать двумя способами: Обернуть input в label (неявная связь): <label> Имя: <input type="text"> </label> Использовать атрибут for в label и id в input (явная связь): <label for="username">Имя:</label> <input type="text" id="username"> Преимущества: Улучшает доступность (скринридеры лучше понимают связь) Клик по label фокусирует соответствующий input Работает для чекбоксов и радио-кнопок (увеличивает область клика)

Question

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

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

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

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

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

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

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

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

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

Ответ 18+ 🔞

А, ну это же классика, блядь! Смотри, как связать label и input, чтобы всё было по феншую и для скринридеров понятно, и пользователю удобно.

Вот тебе два проверенных способа, как это делают нормальные пацаны:

Первый способ — обернуть всё в один тег. Просто и элегантно, как удар с правой.

<label>
  Твоё имя, герой:
  <input type="text">
</label>

Всё, что внутри <label>, уже считается связанным. Кликнул на слово «имя» — курсор прыгнул в поле ввода. Магия, ёпта!

Второй способ — связать на расстоянии, как в плохом браке. Тут нужны id и for.

<label for="userNickname">Твой позывной:</label>
<input type="text" id="userNickname">

Видишь? У input есть уникальный id, как кличка. А у label в атрибуте for эта самая кличка и указана. Они теперь связаны невидимой нитью, блядь.

А нахуя это всё? — спросишь ты. А вот нахуя:

Доступность, ёбана! Скринридер для слепых крипочей прочитает связь и всё поймёт.
Удобство, ядрёна вошь! Кликнул на текст — и поле уже выбрано. Особенно кайфово для этих ваших мелких чекбоксов, куда обычно надо целиться, как снайпер.
Просто правильно, блядь. Так делают, когда не ебут мозги и хотят сделать хорошо.

Выбирай любой, оба рабочие. Главное — сделай, а то без этого твоя форма будет как мартышлюшка без банана: вроде жива, но всё не то.