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

简而言之，它的作用是引用输入的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">

Answer 2

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

在问题的第一个示例（没有 for）中，标签标记的使用没有逻辑或功能含义 - 它是无用的，除非你在CSS或JavaScript中使用它。

超文本标记语言规范没有强制将标签与控件相关联，但Web内容无障碍指南（网页内容无障碍指南）2.0做到了。这在技术文档H44中进行了描述：使用标签元素将文本标签与表单控件相关联，这也解释了隐式关联（通过嵌套例如输入在标签中）不如通过对和id属性的显式关联得到广泛支持，

Answer 3

<代码>

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

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

另一种方法是使用< code>for属性，为其提供相关输入的ID:

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

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

阅读更多有关

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

阅读有关辅助功能的更多信息