Что такое атрибут For для HTML-тега?

Ответ 1

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

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

Когда пользователь нажимает на текст "Username:", он будет фокусировать текстовое поле.

Это также хорошо для доступности, поскольку читатели экрана будут читать внутренний HTML этикетки перед чтением поля ввода, независимо от физического порядка, который они отображают в DOM.

Ответ 2

Он относится к id (не name!) элемента формы (input, select, textarea, option и т.д.), который он маркирует. Следствием этого является то, что использование for позволяет щелкнуть по метке и сфокусировать связанный элемент формы.

Ответ 3

Согласно W3C,

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

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

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

Одно из преимуществ: щелчок на ярлыке будет привязан к фокусу элемента ввода,

В случае кнопки Checkbox OR Radio нажатие на Label будет проверять флажок/радио, но не охватывает пространство между содержимым этикетки и флажком/радио

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>

вы можете добиться того же, выполнив следующие действия:

    <label><input type="radio" name="gender" id="male" value="male"> Male </label>
    <label><input type="radio" name="gender" id="female" value="female"> Female</label>

но эта практика спорна, я предпочитаю вторую для Checkbox/Radio, так как она также охватывает пространство между меткой и флажком/радио.

Ответ 4

По-видимому, спецификации HTML5 дефинирует 2 способа <label> , а все основные браузеры поддерживают как расширение области с кликой на ярлык, так и фокусировку на Control.

a) Управление вложенно внутри метки

b) Ярлык связан с элементом управления с атрибутами для и id

<!-- Method a: nested -->
<p>
  <label>
      Username1: 
      <input type="text" id="name_user" name="nameuser" />
  </label>
</p>

<!-- Method b: linked -->
<p>
  <label for="user_name">Username2: </label>
  <input type="text" id="user_name" name="username" />
</p>

Ответ 5

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

Что не сразу очевидно, так это то, насколько гибкость css позволяет атрибут for.

Например:

1. Выбор кнопки- checkbox может выделить сразу следующую метку:

input[type=checkbox]:checked+label {
  background-color: yellow
}

<input id="c1" type="checkbox" value="c1" />
<label for="c1">Select me</label>