<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 може бути пов'язаний лише з одним контрольним елементом.

[!NOTE] Щоб задати атрибут for програмно, слід використовувати htmlFor.

Перший елемент в документі, чий атрибут id збігається зі значенням атрибута for, є підписаним контрольним елементом щодо такого елемента label – за умови, що елемент з таким id справді є підписуваним елементом. Якщо він не є підписуваним елементом, то атрибут for не має жодної дії. Якщо далі в документі є інші елементи, котрі мають таке ж значення id, то вони не враховуються.

Декільком елементам label можна надати однакове значення атрибутів for; це призводить до того, що пов'язаний контрольний елемент (той, на котрий посилається for) має декілька підписів.

[!NOTE] Елемент <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

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
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 Так