HTML <label> 标签中的“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 还是出于其他原因需要？

原文由 jeff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

在 MDN 上阅读更多关于 <label> 元素的信息。

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

阅读有关可访问性的更多信息

原文由 Barmar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

for 属性将标签与控制元素相关联，如 HTML 4.01 规范中 label 的描述中所定义。这意味着，除其他事项外，当 label 元素获得焦点（例如通过单击）时，它将焦点传递到其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。 （这种关联可能不像在视觉渲染中那么明显。）

在问题的第一个示例中（没有 for ），使用 label 标记没有逻辑或功能含义——它是无用的，除非你在 CSS 或 JavaScript 中对其进行处理.

HTML 规范并没有强制要求将标签与控件相关联，但 Web 内容可访问性指南 (WCAG) 2.0 做到了。这在技术文档 H44: Using label elements to associate text labels with form controls 中有所描述，这也解释了隐式关联（通过嵌套 eg input inside label ）不像通过 for 和 id 属性作为显式关联得到广泛支持，

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议