HTML <label>标记中的“ for”属性有什么作用？

382

我想知道以下两个代码段之间的区别是什么：

<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或出于其他原因而需要？

— 杰夫
source

577

该<label>标签可让您单击标签，它会像点击相关的输入元素上进行处理。有两种创建此关联的方法：

一种方法是将label元素包装在input元素周围：

<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中阅读有关此元素的更多信息。

— 巴尔玛
source

106

请注意，for属性由id属性绑定到输入，并且name属性不必匹配。<label for =“ theinput”>在此处输入：</ label> <input type ='text'name ='notmatching'id ='theinput'>仍将起作用

— Glo

4

单击标签并不总是等同于单击相关元素。例如，在Chrome和Safari中，单击与selectonly 相关联的标签会将焦点放在选择上，而不是扩展选项。

— Emile Pels

2

@EmilePels就浏览器的事件模型而言，它们是等效的。您所描述的更多是关于操作系统对下拉菜单的处理所提供的UI，该菜单与鼠标本身相关。

— 巴马尔

3

值得一提的是，它对于可访问性和屏幕阅读器非常重要，为什么要积极使用它。

— coyotte508 '16

1

在过去的两个小时中，我每次在单击带有输入字段“ for”属性的表单中的标签时，都会产生两次点击，从而使自己处于挣扎状态。我终于明白了为什么即使我在标签的单击上使用stopPropagation为何也仍然会抬起正文的单击……是由于输入字段在您描述的行为之后产生了单击。

— 塞缪尔

52

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

在问题的第一个示例中（不带for），label标记的使用没有逻辑或功能上的含义–它是没有用的，除非您使用CSS或JavaScript对其进行了处理。

HTML规范没有强制要求将标签与控件关联，但是Web内容可访问性指南（WCAG）2.0确实如此。在技术文档H44：使用标签元素将文本标签与表单控件相关联中对此进行了描述，该文档还解释了隐式关联（通过嵌套，例如inputinside label）不如通过for和id属性的显式关联得到广泛支持，

— Jukka K.Korpela
source

10

+1用于讨论语义关系及其在功能单击关系之外的含义。

— ulty4life 2015年

嗨，我有两个具有相同ID的元素，但在不同的div中，我为标签添加了焦点事件，但在第二个元素中，它着重于第一个元素。<html> <body> <div id =“ first_div”> <label for =“名称”>名称</ label> <input type =“ text” id =“名称”> </ div> <div id =“ second_div “> <label for =” name“>名称</ label> <input type =” text“ id =” name“> </ div> </ body> </ html>

— LoveToCode

14

简而言之，它所做的就是引用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">

— 乌威·基姆（Uwe Keim）
source

6

即使它们相邻，添加for也很重要。我似乎回想起听说过一些视障人士的屏幕阅读器在其他方面存在问题。因此，如果您希望与可能正在使用其他浏览器/屏幕阅读器的用户保持友好，请使用此方法。

— bean5 2015年

3

<label>标签的for属性应等于相关元素的id属性，以将它们绑定在一起。

— 拉胡尔·特里帕蒂（Rahul Tripathi）
source

7

是的，但是“将它们绑定在一起”是什么意思？他们已经是HTML结构中的邻居。这是我不明白的。

— 2013年

1

FOR指定标签绑定到哪个表单元素

— Rahul Tripathi

2

@CengizFrostclaw jsfiddle.net/DmSGh ---尝试单击“此处输入”两个文本，然后看看会发生什么。

— JJJ

1

@CengizFrostclaw：-可以使用“ for”属性将标签绑定到元素

— Rahul Tripathi 2013年

1

有一些不错的功能，例如，当您使用单选按钮时。单击标签实际上将切换单选按钮。当您尝试通过自定义ui使用单选按钮时，这是一个很好的功能。

— 亚历克斯

0

for属性显示此标签代表相关的输入字段，复选框或单选按钮或与之关联的任何其他数据输入字段。例如

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— 帕克斯
source

0

它标记任何输入是该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>

展开摘要

— pythag0ras_
source