<label>: Елемент підпису

{{HTMLSidebar}}

Елемент 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>. До них можна застосовувати будь-яке оформлення, за умови, що текст не стає складно читати.

Приклади

Визначення неявного підпису

<label>Клацни мене <input type="text" /></label>

Визначення явного підпису з атрибутом "for"

<label for="username">Клацни мене для зосередження на полі введення</label>
<input type="text" id="username" />

Занепокоєння щодо доступності

Інтерактивний вміст

Не слід вміщувати інтерактивні елементи, як то 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>.

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

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

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