<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" />

Технічний підсумок

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

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