<label>: Елемент підпису
Елемент HTML <label>
(підпис, позначка) представляє підпис для елемента користувацького інтерфейсу.
Спробуйте його в дії
Пов'язання <label>
з контрольним елементом, як то <input>
чи <textarea>
, пропонує доволі суттєві переваги:
- Текст підпису не лише візуально пов'язується з відповідним текстовим полем; він також пов'язаний з ним програмно. Це означає, що, наприклад, читач з екрана зачитає підпис, коли користувач зосереджений на полі форми, полегшуючи користувачеві допоміжної технології зрозуміти, які дані повинні бути введені.
- Коли користувач клацає чи тицяє позначку, браузер переводить увагу на пов'язане з нею поле введення (результівна подія також спрацьовує для поля). Це збільшує область спрацювання для переведення уваги на поле, що зручно для всіх, хто спробує його активувати – включно з тим, хто користується пристроєм з дотиковим екраном.
Щоб явно пов'язати елемент <label>
з елементом <input>
, спершу треба надати елементові <input>
атрибут id
. Далі – додати до елемента <label>
атрибут for
, чиє значення – таке ж, як в атрибута id
елемента <input>
.
Інший варіант: можна вкласти <input>
безпосередньо в <label>
, у випадку чого атрибути for
і id
непотрібні, адже тоді пов'язування спрацьовує неявно:
<label>
Любите вареники?
<input type="checkbox" name="varenyky" />
</label>
Контрольний елемент, котрий позначає підпис, зветься підписаним контрольним елементом елемента підпису. З одним контрольним елементом можуть бути пов'язані декілька підписів:
<label for="username">Уведіть своє ім'я користувача:</label>
<input id="username" name="username" type="text" />
<label for="username">Забули своє ім'я користувача?</label>
Серед елементів, що можуть бути пов'язані з <label>
: <button>
, <input>
(except for type="hidden"
), <meter>
, <output>
, <progress>
, <select>
і <textarea>
.
Атрибути
Цей елемент включає глобальні атрибути.
for
Значення атрибута
for
мусить бути однимid
підписуваного елемента форми у тому самому документі, що й елемент<label>
. Отже, будь-який елементlabel
може бути пов'язаний лише з одним контрольним елементом.Примітка: Щоб задати атрибут
for
програмно, слід використовуватиhtmlFor
.Перший елемент в документі, чий атрибут
id
збігається зі значенням атрибутаfor
, є підписаним контрольним елементом щодо такого елементаlabel
– за умови, що елемент з такимid
справді є підписуваним елементом (англ.). Якщо він не є підписуваним елементом, то атрибутfor
не має жодної дії. Якщо далі в документі є інші елементи, котрі мають таке ж значенняid
, то вони не враховуються.Декільком елементам
label
можна надати однакове значення атрибутівfor
; це призводить до того, що пов'язаний контрольний елемент (той, на котрий посилаєтьсяfor
) має декілька підписів.Примітка: Елемент
<label>
може мати як атрибутfor
, так і контрольний елемент всередині себе, за умови що атрибутfor
вказує на той контрольний елемент, що всередині.
Оформлення засобами CSS
Немає жодних рекомендацій щодо оформлення елементів <label>
: структурно вони є простими рядковими елементами, тож їх можна оформлювати так само як елемент <span>
чи <a>
. До них можна застосовувати будь-яке оформлення, за умови, що текст не стає складно читати.
Доступність
Інтерактивний вміст
Не слід вміщувати інтерактивні елементи, як то anchors чи buttons, всередину label
. Подібна практика ускладнює активацію поля форми, пов'язаного з label
.
Не робіть так:
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions" />
Погоджуюся з <a href="terms-and-conditions.html">Положеннями та умовами</a>
</label>
Краще робіть так:
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions" />
Погоджуюся з Положеннями та умовами
</label>
<p>
<a href="terms-and-conditions.html">Читати Положення та умови</a>
</p>
Заголовки
Поміщення заголовкових елементів всередину <label>
стає на заваді різноманітним допоміжним технологіям, адже заголовки загальноприйнято використовуються як поміч в орієнтуванні. Якщо текст підпису треба підлаштувати візуально, краще натомість застосувати до <label>
класи CSS.
Якщо форма чи розділ форми потребує заголовка, слід використовувати елемент <legend>
, розташований всередині <fieldset>
.
Не робіть так:
<label for="your-name">
<h3>Ваше ім'я</h3>
<input id="your-name" name="your-name" type="text" />
</label>
Краще робіть так:
<label class="large-label" for="your-name">
Ваше ім'я
<input id="your-name" name="your-name" type="text" />
</label>
Кнопки
Елемент <input>
з оголошенням type="button"
та дійсним атрибутом value
не потребує пов'язування з ним підпису. Така практика насправді може стати на заваді тому, як допоміжні технології розбирають кнопкове поле. Те саме стосується елемента <button>
.
Приклади
Визначення неявного підпису
<label>Клацни мене <input type="text" /></label>
Визначення явного підпису з атрибутом "for"
<label for="username">Клацни мене для зосередження на полі введення</label>
<input type="text" id="username" />
Технічний підсумок
Категорії вмісту | Потоковий вміст, оповідальний вміст, інтерактивний вміст, формовий вміст, дотиковий вміст. |
---|---|
Дозволений вміст |
Оповідальний вміст, що не містить жодних елементів label . Не дозволені інші
підписні
елементи, крім того, що підписується цим підписом.
|
Пропуск тега | Немає; і початковий, і кінцевий теги – обов'язкові. |
Дозволені батьківські елементи | Всі елементи, що приймають оповідальний вміст. |
Неявна роль ARIA | Немає відповідної ролі |
Дозволені ролі ARIA | role не дозволено |
Інтерфейс DOM | HTMLLabelElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-label-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
label
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
for
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |