HTML中for属性的目的是什么？

Question

我了解for属性指定了form绑定的label元素。

你有一个实际上有用的例子吗？

Answer 1

对于复选框标签来说，它最有用，它可以使整个标签可以点击，因此您不必将复选框本身作为目标，以切换其状态。单选按钮也一样。

Answer 2

<label for="email">E-mail:</label>
<input type="text" id="email" name="email"/>

现在，如果您点击“电子邮件”，相应的input元素将会聚焦。

Answer 3

<label for="name">Name</label>

<input type="text" id="name" />

http://jsfiddle.net/jRB2s/3/

单击标签将关注具有与for值相同ID的元素。

对于单选按钮或复选框，它将切换状态，就像您单击它们一样。

这在手持设备上非常有用，单击所需的表单控件并不总是很简单。

Answer 4

它出于语义目的。它对于屏幕阅读器以及潜在的搜索引擎很有用。浏览器还会将控件连接到其标签（例如，单击标签时复选框将激活），您可以将快捷键应用于标签，这些标签会在按下时控制其控件。

标签有两种格式：

<label>Label<input ... /></label> 

不需要for属性。并且

<label for="control">Label</label>
<input id="control" name="control" ... />

当标签和输入分开时可能需要（例如表格）。