html - HTML 标签中的 "for"属性有什么作用？

Question

我想知道以下两个代码片段有什么区别:

<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 还是出于其他原因需要？

Answer 1

<label> tag 允许您单击标签，它将被视为单击关联的输入元素。有两种方法可以创建此关联:

一种方法是将标签元素包裹在输入元素周围:

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

另一种方法是使用 for属性，给它相关输入的 ID:

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

这对于与复选框和按钮一起使用特别有用，因为这意味着您可以通过单击相关文本来选中该框，而不必点击该框本身。

Read more about the <label> element on MDN .

将文本与输入相关联对于可访问性非常重要，因为它为输入提供了一个可访问的名称，以便辅助技术可以将其提供给残障用户。当用户关注输入时，屏幕阅读器会读取标签文本。您也可以告诉您的语音命令软件关注该输入，但它需要一个(可见的)名称。

Read more on Accessibility