Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить <label>? Як <label> пов'язується з полем вводу?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Елемент `<label>`** використовується для створення підпису до елемента форми (наприклад, до `<input>`, `<select>`, `<textarea>`). Він робить інтерфейс зручнішим і зрозумілішим: користувач бачить, до якого поля належить текст, і може клацнути на напис, щоб активувати це поле. **Ключове:** зв'язок між `<label>` і елементом форми відбувається через атрибут `for` і значення `id`, або через вкладення поля прямо всередину `<label>`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<label>` використовується для створення **підпису до елемента форми** (наприклад, до `<input>`, `<select>`, `<textarea>`). Він робить інтерфейс зручнішим і зрозумілішим: користувач бачить, **до якого поля належить текст**, і може **клацнути на напис**, щоб активувати це поле. --- ### 1. Приклад базового використання ```html <form> <label for="email">Ваш email:</label> <input type="email" id="email" name="user_email"> </form> ``` Що відбувається: - `<label>` містить текст "Ваш email:"; - атрибут `for="email"` вказує, **з яким полем** пов'язаний цей ярлик; - `id="email"` у поля - це **ідентифікатор**, на який посилається `for`. Результат: під час клацання на текст "Ваш email" фокус автоматично переходить у поле вводу. --- ### 2. Як працює зв'язок Зв'язок між `<label>` і елементом форми відбувається **через атрибут** `for` і **значення** `id`. | Що у `<label>` | Що в елемента форми | |---|---| | `for="email"` | `id="email"` | Схема: ```html <label for="username">Ім'я користувача:</label> <input type="text" id="username" name="user"> ``` `<label>` "прикріплений" до поля з `id="username"`. --- ### 3. Альтернативний спосіб - без for Можна просто **вкласти** елемент вводу всередину `<label>`. Тоді зв'язок встановлюється автоматично: ```html <label> <input type="checkbox" name="agree"> Я погоджуюся з умовами </label> ``` Тут, клацаючи на текст, користувач також активує чекбокс. Цей спосіб зручний для коротких підписів (checkbox, radio). --- ### 4. Чому <label> важливий - Покращує **юзабіліті**: клацаючи по тексту, можна активувати поле, зручно на мобільних. - Підвищує **доступність**: програми читання з екрана озвучують `label`, коли користувач переміщується формою. - Покращує **зрозумілість форми**: текст і поле візуально пов'язані. - Не потребує JavaScript, усе працює на рівні HTML. --- ### 5. Приклади для різних полів #### Текстове поле: ```html <label for="name">Ім'я:</label> <input type="text" id="name"> ``` #### Перемикачі (radio): ```html <label> <input type="radio" name="gender" value="male"> Чоловік </label> <label> <input type="radio" name="gender" value="female"> Жінка </label> ``` #### Прапорець (checkbox): ```html <label> <input type="checkbox" name="agree"> Я приймаю умови </label> ``` --- ### Підсумок: | Елемент | Призначення | |---|---| | `<label>` | Підпис до елемента форми | | `for` | Вказує, з яким елементом пов'язаний ярлик | | `id` у поля | Має збігатися з `for` | | Альтернатива | Можна вкласти поле всередину `<label>` | | Користь | Покращує доступність, клікабельність і зручність | --- **Простими словами:** `<label>` - це **ярлик для поля**. Він каже користувачу: *"введи ось сюди"*, а браузеру: *"пов'яжи цей текст з конкретним елементом форми"*.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.