Что делает атрибут" for " В теге HTML?

интересно, в чем разница между следующими двумя фрагментами кода:

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

и

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

Я уверен, что он что-то делает, когда вы используете специальную библиотеку JavaScript, но кроме того, проверяет ли он HTML или требуется по какой-то другой причине?

4 ответов


на <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'>

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

подробнее об этом элементе в MDN.


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

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

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


в двух словах то, что он делает, относится к 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">

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