在HTML <label>标签中,“for”属性是做什么的?

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

<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库,它会做一些事情,但除此之外,它是否validationHTML或其他原因所需?

<label>标签允许您单击标签,并将其视为点击相关的input元素。 有两种方法可以创build这种关联:

首先,您可以将标签元素包装在input元素周围:

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

另一种方法是使用for属性,给它关联input的ID:

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

这对于使用checkbox和button特别有用,因为这意味着您可以通过单击相关的文本来选中该checkbox,而无需点击checkbox本身。

在MDN中详细了解这个元素。

for属性将标签与控制元素相关联,如HTML 4.01规范中label的描述中所定义。 这意味着,除了别的以外,当label元素获得焦点(例如通过被点击)时,它将焦点转移到其关联的控制。 基于语音的用户代理也可以使用标签和控件之间的关联,这可以使用户在处理控件时能够询问相关标签是什么。 (这个关联可能不像视觉渲染那样明显。)

在问题的第二个例子中, label标记的使用没有任何逻辑或function的含义 – 除非您在CSS或JavaScript中使用它,否则没用。

HTML规范并不强制将标签与控件相关联,但是Web Content Accessibility Guidelines(WCAG)2.0可以。 这在技术文档H44中描述:使用标签元素将文本标签与表单控件相关联 ,这也解释了隐式关联(通过嵌套例如inputlabel )不如通过forid属性的显式关联那样被广泛支持,

简而言之,它所做的是指input的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"> 

<label>标签的for属性应该与相关元素的id属性相同,以将它们绑定在一起。