Исполняемые доки HTML: Label

Q: Что такое атрибут for у label?

for содержит id поля, к которому относится подпись: Email . Он должен точно совпадать с id, а не с name.

Q: Как скрыть label, но оставить его для программ чтения с экрана?

Оставьте и скройте его визуально классом, который сжимает его до 1 пикселя и обрезает, а не через display: none, который скрывает его и от программ чтения с экрана. Для поля, где совсем нет места под подпись, альтернативой служит aria-label у самого поля.

Что делает элемент label

<label> дает полю формы имя. Свяжите его через for, равный id поля, и произойдут две вещи: программы чтения с экрана объявляют подпись, когда поле получает фокус, а клик по тексту подписи ставит фокус в поле. Кликните по обоим текстам ниже:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Клик по «City» ставит курсор в поле. Клик по «Country» ничего не делает, а программа чтения с экрана на втором поле слышит только «поле редактирования», без имени. Выглядят они одинаково; подписано только одно.

Два способа связать подпись

Используйте for и id или поместите поле внутрь label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` и `id`	Обертывание
Нужен `id`	Да, уникальный на странице	Нет
Подпись и поле могут стоять отдельно	Да (ячейка таблицы, сетка)	Нет, поле внутри
Как легко сломать	Опечаткой или повторным `id`	Двумя полями в одной подписи

for должен совпадать с id поля, а не с его name. Часто это одно и то же слово, и ошибка скрыта, пока кто-нибудь не изменит одно из них. Использовать оба способа сразу (обертывание и for) нормально и распространено.

Подпись можно связать с <input> (кроме type="hidden"), <select>, <textarea>, <button>, <meter>, <output> и <progress>. Одна подпись называет одно поле. У поля может быть несколько подписей, но одна понятная подпись удобнее всем.

Большая область клика для чекбоксов и радиокнопок

Для маленьких элементов управления подпись важнее всего: клик в любом месте подписи переключает флажок, поэтому целью становится вся строка текста, а не квадрат размером 13 пикселей. Оформление подписи может сделать область еще больше:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Кликните по внутреннему отступу каждой строки, в стороне от флажка. Первая строка переключается; вторая ничего не делает, если не попасть точно во флажок. Подробнее о чекбоксах на странице чекбокс в HTML.

Подсказки и сообщения об ошибках

Подпись должна быть короткой: название поля. Дополнительные инструкции и сообщения об ошибках пишут в отдельных элементах и связывают через aria-describedby, чтобы программы чтения с экрана сначала читали подпись, а потом описание:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Нажмите Create с пустым полем, затем с AB, затем с ada99. С aria-describedby программа чтения с экрана объявит что-то вроде «Username, обязательное, поле редактирования, 3 to 16 lowercase letters or digits, Enter a username.» Звездочка помечена aria-hidden, потому что атрибут required уже сообщает «обязательное»; слово «звездочка» ничего не добавляет.

Скрытые подписи

У некоторых полей есть видимая подсказка помимо текстовой подписи, например поле поиска рядом с кнопкой Search. Подпись все равно нужна; скройте ее визуально, но оставьте на странице для программ чтения с экрана:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Не скрывайте ее через display: none или visibility: hidden: так она скрывается и от программ чтения с экрана, и не каждый браузер и не каждая программа чтения с экрана все еще используют скрытую подпись как имя. Другой вариант это aria-label="Search courses" у поля, который дает ему имя без элемента label. Видимая подпись все равно лучший выбор, когда есть место: всем полезно видеть, для чего поле.

Частые ошибки

for указывает на name вместо id. Связи нет.
Повторяющиеся id. for связывается с первым элементом с этим id, а это может быть поле другой формы на странице.
Placeholder вместо подписи. Он исчезает при вводе и не является надежным именем.
Два поля внутри одной подписи. Подпись называет одно поле; второе остается без подписи.
Ссылка внутри подписи чекбокса, например «Я принимаю условия», где «условия» это ссылка. Часть строки переключает флажок, а часть открывает страницу, и промахнуться легко. Вынесите ссылку за пределы подписи.
Подпись скрыта через display: none. Используйте класс для визуального скрытия.
Текст рядом с полем, который не является <label>. Выглядит так же и ничего не делает. О форме вокруг полей читайте на странице формы в HTML.

Часто задаваемые вопросы

Что делает тег label в HTML?

Он дает имя полю формы. Программы чтения с экрана зачитывают подпись, когда поле получает фокус, а клик по подписи ставит фокус в поле или переключает его, если это чекбокс или радиокнопка.

Что такое атрибут for у label?

for содержит id поля, к которому относится подпись: <label for="email">Email</label> <input id="email">. Он должен точно совпадать с id, а не с name.

Класть input внутрь label или использовать for?

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

Может ли placeholder заменить label?

Нет. Placeholder исчезает, как только читатель начинает печатать, часто малоконтрастен и не всегда объявляется как имя поля. Используйте видимый <label>, а placeholder оставьте для примера значения, если он вообще нужен.

Как скрыть label, но оставить его для программ чтения с экрана?

Оставьте <label> и скройте его визуально классом, который сжимает его до 1 пикселя и обрезает, а не через display: none, который скрывает его и от программ чтения с экрана. Для поля, где совсем нет места под подпись, альтернативой служит aria-label у самого поля.

Связанные концепции

Label в HTML: атрибут for и подписи к полям формы