W3docs
ru
Войти

HTML тег <label>

Тег HTML <label>: явная (for/id) и неявная связь, доступность, примеры использования. Учитесь с W3Docs.

HTML-тег <label> определяет подпись для элемента управления формой, например <input>, <select> или <textarea>. Метка и элемент управления связаны, поэтому браузер знает, что текст относится именно к этому полю.

На этой странице рассматриваются два способа связи метки с элементом управления, важность меток для доступности и удобства использования, а также отличие <label> от атрибутов ARIA-маркировки и placeholder.

Почему метки важны

Метка — это не просто видимый текст рядом с полем: она программно привязана к элементу управления. Эта привязка даёт три конкретных преимущества:

  • Доступность. Когда элемент управления получает фокус, программа экранного доступа озвучивает его метку, и пользователь знает, что нужно вводить. Без метки поле объявляется только по типу (например, «текстовое поле») без какого-либо контекста.
  • Увеличенная область нажатия. Щелчок или нажатие на метку переводит фокус на элемент управления (а для флажков и переключателей — переключает его). Это особенно ценно для маленьких флажков и переключателей, в которые сложно попасть пальцем на сенсорных экранах.
  • Лучшее удобство использования. Пользователи сразу понимают, какая подпись к какому полю относится, что снижает количество ошибок при заполнении форм.

Два способа связать метку с элементом управления

Существует два способа связать <label> с элементом управления: явная связь с помощью атрибута for и неявная связь путём оборачивания элемента управления.

Явная связь (for + id)

Присвойте элементу управления атрибут id, а затем установите атрибут for метки на то же значение. Значение for должно точно совпадать с id элемента управления, и этот id должен существовать в документе.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label>
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>
Попробуйте сами »

Явная маркировка является наиболее гибким подходом: метка и элемент управления могут находиться в любом месте разметки, что удобно, когда ваш макет (например, CSS Grid или таблица) разделяет подпись и поле.

Неявная связь (оборачивание элемента управления)

Поместите элемент управления внутрь элемента <label>. Пара id/for не нужна — вложение автоматически создаёт связь.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
        <input name="Name" type="text" />
      </label>
    </form>
  </body>
</html>
Попробуйте сами »

Оба метода дают одинаковый результат. Оборачивание лаконично и гарантирует связь, даже если вы забыли указать id; явный атрибут for является предпочтительным, когда структура разметки разделяет метку и элемент управления.

Правила и подводные камни

  • Одна метка — один элемент управления. Один <label> связывается ровно с одним элементом управления формы. Если обернуть два поля ввода в одну метку, будет связано только первое.
  • У одного элемента управления может быть несколько меток. На одно поле ввода могут ссылаться несколько <label for="...">, и все они будут переводить на него фокус или переключать его при нажатии.
  • Атрибут for должен указывать на реальный id. Если значение for не совпадает ни с одним существующим id, связь молча не устанавливается — метка становится обычным текстом.
  • Связывать можно только элементы управления формы. <label> может подписывать <input> (кроме type="hidden"), <button>, <meter>, <output>, <progress>, <select> и <textarea>. Он не подписывает <div>, <span> или заголовки.
  • Избегайте интерактивного содержимого внутри метки. Не помещайте другой элемент управления (второй input, кнопку или ссылку) внутрь <label>, так как он будет конкурировать с подписываемым элементом управления за нажатия.

Флажки и переключатели

Здесь метки особенно важны, потому что область нажатия очень маленькая. При наличии правильной метки вся подпись становится частью области нажатия.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona" />
      <br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid" />
      <br />
    </form>
  </body>
</html>
Попробуйте сами »

Маркировка без видимого <label>: ARIA и placeholder

Иногда видимая метка не вписывается в дизайн. Видимый <label> всё равно должен оставаться вашим выбором по умолчанию — он приносит пользу всем пользователям, а не только тем, кто использует программы экранного доступа, — но для исключительных случаев существуют следующие варианты.

aria-label

Используйте aria-label для прямого указания доступного имени на элементе управления, когда нет видимого текста для ссылки (например, поле поиска с только иконкой лупы).

<input type="search" aria-label="Search the site" />

aria-labelledby

Используйте aria-labelledby, когда текст наименования уже существует в другом месте страницы. Он ссылается на один или несколько id элементов и, в отличие от for, позволяет составить метку из нескольких фрагментов текста.

<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />

Если присутствуют одновременно <label> и aria-labelledby, приоритет имеет aria-labelledby.

placeholder — это не метка

placeholder — это пример текста, а не метка. Он исчезает, как только пользователь начинает вводить данные, имеет низкий цветовой контраст в большинстве браузеров и ненадёжно объявляется вспомогательными технологиями в качестве имени поля. Всегда используйте настоящий <label> для поля ввода — никогда не полагайтесь только на placeholder.

<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />

<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />

Пример HTML-тега <label> со свойствами шрифтов CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="user">Your Name:</label>
      <input id="user" name="Name" type="text" />
    </form>
  </body>
</html>
Попробуйте сами »

Атрибуты

АтрибутЗначениеОписание
accesskeyaccesskeyОпределяет сочетание клавиш для перевода фокуса на связанный элемент формы (не выполняет переход к нему).
forelement\_idЗадаёт ID элемента, с которым должна быть связана метка.
formform\_idУказывает форму (формы), с которой будет связана метка. Этот атрибут позволяет размещать теги в произвольном месте документа, не только как дочерний элемент &lt;form&gt;.

Элемент <label> также поддерживает Глобальные атрибуты и Атрибуты событий.

Пример атрибута form:

Атрибут form позволяет метке находиться за пределами <form>, к которой она относится. Элемент управления по-прежнему использует обычную связь через for/id.

<form id="myForm">
  <input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>

Связанные темы

  • HTML тег <input> — элемент управления, который чаще всего подписывают.
  • HTML тег <form> — контейнер, группирующий метки и элементы управления.
  • HTML атрибут id — как строится связь for/id.

Практика

Практика
Какой метод правильно связывает метку с текстовым полем ввода с именем email?
Какой метод правильно связывает метку с текстовым полем ввода с именем email?
Was this page helpful?