Ответ
label в HTML — это элемент, который связывает текст с формой или её элементом, улучшая доступность и UX. Клик по label фокусирует связанный элемент (например, input).
Связь через for и id:
<label for="username">Имя пользователя:</label>
<input type="text" id="username">Или оборачивание:
<label>
Email: <input type="email">
</label>Особенности:
- Улучшает доступность для скринридеров.
- Увеличивает кликабельную область (полезно для чекбоксов/радио).
- Невизуальный элемент, но влияет на семантику.
Ответ 18+ 🔞
Да ты посмотри, какой удобный штука этот label! Ну реально, гениальная придумка, чтобы не тыкать пальцем в экран, как обезьяна, пытаясь попасть в эту мелкую хуйню — в чекбокс размером с блоху.
Представь, есть у тебя форма, а в ней input. И текст рядом: «Введи имя». Так вот, если этот текст — обычный span, то чтобы курсор в инпут попал, ты должен тыкнуть прямо в него, блядь. А если обернуть текст в <label> и привязать его к инпуту — то кликнуть можно по ЛЮБОМУ месту этой надписи! Ёпта, вот это удобство! Кликабельная область — овердохуища!
Связать их можно двумя способами, как два хуя из одного мешка:
Первый способ, классический: через for и id.
Тут всё просто, как три копейки. Label'у даёшь атрибут for, а инпуту — id с таким же значением. И всё, они поженились, блядь.
<label for="userNickname">Твой позывной в интернетах:</label>
<input type="text" id="userNickname">Теперь ткни пальцем в текст «Твой позывной...» — и курсор волшебным образом появится в этом инпуте. Магия, сука!
Второй способ, внаглую: просто обернуть. Зачем выёбываться с айдишниками, если можно взять и запихнуть инпут прямо внутрь лейбла? Лейбл сам всё поймёт.
<label>
Твой секретный email: <input type="email">
</label>Всё. Работает так же. Красота, блядь.
А нахуя это всё? — спросит какой-нибудь умник.
- Для доступности, ёпта! Скринридеры для слепых обожают лейблы. Без них форма — это просто набор непонятных полей, а с ними — всё ясно, куда что вводить. Не будь мудаком, делай доступно.
- Для юзабилити, блядь! Особенно кайфово с радио-кнопками и чекбоксами. Вместо того чтобы целиться в кружочек размером с пиксель, можно шарахнуть по целой строке текста рядом. Вообще пиздец как удобно.
- Для семантики! Он хоть и невидимый глазу, но браузеры и всякие парсеры понимают, что это не просто текст, а именно подпись к полю. Это правильно, это по феншую.
Короче, label — это не просто тег, это проявление уважения к пользователю. Используй, не ёби мозги людям.