Что делает атрибут "для" в теге HTML <label>?

Ответ 1

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

Сначала вы можете обернуть элемент метки вокруг элемента ввода:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Другой способ - использовать атрибут for, указав ему идентификатор связанного ввода:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

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

Подробнее об этом элементе читайте в MDN.

Ответ 2

Атрибут for связывает метку с элементом управления, как определено в описании label в спецификации HTML 4.01. Это подразумевает, в частности, что, когда элемент label получает фокус (например, при нажатии на него), он переходит к соответствующему элементу управления. Связь между меткой и элементом управления также может использоваться пользовательскими агентами на основе речи, которые могут дать пользователю возможность спросить, что такое связанная метка, при работе с элементом управления. (Связь может быть не такой очевидной, как при визуальном рендеринге.)

Во втором примере в вопросе использование разметки label не имеет логической или функциональной импликации - ее бесполезно, если вы не сделаете что-то с ней в CSS или JavaScript.

Спецификации HTML не делают обязательным связывать метки с элементами управления, но это делает рекомендации по доступности веб-контента (WCAG) 2.0. Это описано в техническом документе H44: использование элементов меток для связывания текстовых меток с элементами управления формами, что также объясняет, что неявная ассоциация (путем вложения, например, input внутри label) не так широко поддерживается как явная связь через атрибуты for и id,

Ответ 3

Вкратце, что он делает, это ссылка на id на входе, что все:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

Ответ 4

Атрибут for тега <label> должен быть равен атрибуту id связанного элемента для их объединения.