HTML <label> 标签中的“for”属性有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18432376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does "for" attribute do in HTML <label> tag?
提问by jeff
I wonder what is the difference between the following two code snippets:
我想知道以下两个代码片段有什么区别：
<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
and
和
<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
I'm sure it does something when you use a special JavaScript library, but apart from that, does it validate the HTML or required for some other reason?
我确信当您使用特殊的 JavaScript 库时它会做一些事情，但除此之外，它是否验证 HTML 或出于其他原因需要？
回答by Barmar
The <label>tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:
该<label>标签可让您单击标签，它会像点击相关的输入元素上进行处理。有两种方法可以创建此关联：
One way is to wrap the label element around the input element:
一种方法是将 label 元素包裹在 input 元素周围：
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
The other way is to use the forattribute, giving it the ID of the associated input:
另一种方法是使用该for属性，为其提供关联输入的 ID：
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>
This is especially useful for use with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to hit the box itself.
这对于与复选框和按钮一起使用特别有用，因为这意味着您可以通过单击相关文本来检查框，而不必点击框本身。
Read more about this element in MDN.
在MDN 中阅读有关此元素的更多信息。
回答by Jukka K. Korpela
The forattribute associates the label with a control element, as defined in the description of labelin the HTML 4.01 spec. This implies, among other things, that when the labelelement receives focus (e.g. by being clicked on), it passes the focus on to its associated control. The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. (The association may not be as obvious as in visual rendering.)
该for属性将标签与控制元素相关联，如labelHTML 4.01 规范中的描述中所定义。这意味着，当label元素接收到焦点（例如，通过点击）时，它会将焦点传递给其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。（这种关联可能不像在视觉渲染中那样明显。）
In the first example in the question (without the for), the use of labelmarkup has no logical or functional implication – it's useless, unless you do something with it in CSS or JavaScript.
在问题的第一个示例中（没有for），label标记的使用没有逻辑或功能含义——它没有用，除非你在 CSS 或 JavaScript 中用它做一些事情。
HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. This is described in the technical document H44: Using label elements to associate text labels with form controls, which also explains that the implicit association (by nesting e.g. inputinside label) is not as widely supported as the explicit association via forand idattributes,
HTML 规范并未强制将标签与控件相关联，但 Web 内容可访问性指南 (WCAG) 2.0 可以。这在技术文档H44：使用标签元素将文本标签与表单控件相关联中进行了描述，这也解释了隐式关联（通过嵌套，例如input在内部label）不像显式关联 viafor和id属性那样得到广泛支持，
回答by Jukka K. Korpela
In a nutshell what it does is refer to the idof the input, that's all:
简而言之，它的作用是引用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">
回答by Rahul Tripathi
The for attribute of the <label>tag should be equal to the id attribute of the related element to bind them together.
<label>标签的 for 属性应该等于相关元素的 id 属性将它们绑定在一起。
回答by Pax
The for attribute shows that this label stands for related input field, or check box or radio button or any other data entering field associated with it. for example
for 属性显示此标签代表相关的输入字段，或复选框或单选按钮或与其关联的任何其他数据输入字段。例如
<li>
<label>{translate:blindcopy}</label>
<a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a>  
<input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
</li>
回答by pythag0ras_
It labels whatever input is the parameter for the forattribute.
它标记任何输入是for属性的参数。
<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>