Атрибут for тега <label> — зв'язок мітки з полем

Атрибут for (HTML тега <label>) визначає до якого елементу форми відноситься поточна мітка (в тому ж документі).

правити

Загальний опис

правити

Порада

Атрибут for необхідно ставити в тому випадку, коли елемент форми і текст розділені. Якщо <input> розміщується всередині контейнера <label>, то застосовувати атрибут for не потрібно.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<label for="element_id">

Атрибут for може отримувати єдине значення:

element_id

Ідентифікатор елементу форми який прив’язується.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	≤4	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3.2

Приклади

+ запропонувати свій приклад у пісочниці

<form>
  <p>Приклад використання атрибута for </p>
   <p><b>Виберіть свій улюблений напій:</b></p>
   <p><input type="radio" name="l" id="radio1">
    <label for="radio1">Вода без газу</label></p>
    <p><input type="radio" name="l" id="radio2">
    <label for="radio2">Coca-Cola</label></p>
   <p><input type="radio" name="l" id="radio3">
    <label for="radio3">Pepsi</label></p>
  </form>

<form>
    <p>
        <label for="mail">Правильно: for="mail" — це id поля</label><br>
        <input id="mail" name="email" type="email" size="30">
    </p>

    <p>
        <label for="phone">Помилка: for="phone" — це name, а не id</label><br>
        <input id="tel-1" name="phone" type="tel" size="30">
    </p>

    <p>
        <input id="agree" type="checkbox">
        <label for="agree">Клік по цьому підпису перемикає прапорець</label>
    </p>
</form>

label { cursor: pointer; }
p { margin: 0 0 16px; }
input:focus { outline: 2px solid #127a4d; outline-offset: 1px; }