Что делает атрибут" 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">