提问人：jeff 提问时间：8/26/2013 最后编辑：SuperStormerjeff 更新时间：8/30/2022 访问量：238249
“for”属性在 HTML <label> 标签中有什么作用？
What does "for" attribute do in an HTML <label> tag?
问：
我想知道以下两个代码片段之间有什么区别：
<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 还是出于其他原因而需要的？
答：
2赞
Rahul Tripathi
8/26/2013
#1
标记的属性应等于相关元素的属性，以便将它们绑定在一起。for<label>id
评论
10赞
jeff
8/26/2013
是的，但是“将它们绑定在一起”是什么意思？它们在 HTML 结构中已经是邻居。这是我不明白的。
2赞
Rahul Tripathi
8/26/2013
FOR 指定标签绑定到的表单元素
2赞
JJJ
8/26/2013
@CengizFrostclaw jsfiddle.net/DmSGh---尝试单击两个“在此处输入”文本，看看会发生什么。
1赞
Rahul Tripathi
8/26/2013
@CengizFrostclaw：- 可以使用“for”属性将标签绑定到元素
1赞
Alex
8/26/2013
有一些不错的功能，例如，当您使用单选按钮时。单击标签实际上将切换单选按钮。当您尝试使用带有自定义 ui 的单选按钮时，这是一个不错的功能。
738赞
Barmar
8/26/2013
#2
该标签允许您单击标签，它将被视为单击关联的输入元素。有两种方法可以创建此关联：<label>
一种方法是将 label 元素包裹在输入元素周围：
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
另一种方法是使用该属性，为其提供关联输入的 ID：for
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>
这对于与复选框和按钮一起使用特别有用，因为这意味着您可以通过单击相关文本来选中该框，而不必点击框本身。
将文本与输入相关联对于辅助功能非常重要，因为它为输入提供了一个辅助名称，以便辅助技术可以将其提供给残障用户。当用户聚焦输入时，屏幕阅读器将读取标签文本。你也可以告诉你的语音命令软件集中输入，但它需要一个（可见的）名称。
评论
140赞
Glo
1/15/2015
请注意，for 属性通过 id 属性绑定到输入，并且 name 属性不必匹配。<label for=“theinput”>在此处输入：</label> <input type='text' name='notmatching' id='theinput'> 仍然有效
5赞
Emile Pels
2/8/2016
对标签的单击并不总是与单击相关元素完全相同。例如，在 Chrome 和 Safari 中，单击与 关联的标签只会将焦点放在选择上，而不是展开选项。select
2赞
Barmar
2/8/2016
@EmilePels 就浏览器的事件模型而言，它们是等效的。您所描述的更多是关于操作系统处理下拉菜单提供的 UI，该下拉菜单与鼠标本身相关联。
6赞
coyotte508
6/6/2016
值得一提的是，它与可访问性和屏幕阅读器非常相关，为什么要积极使用它。
2赞
Gershom Maes
8/27/2019
我讨厌使用不当，我需要像某种神经外科医生一样点击微小的复选框。for
64赞
Jukka K. Korpela
8/26/2013
#3
该属性将标签与控制元素相关联，如 HTML 4.01 规范中的标签描述中所定义。这意味着，除其他外，当元素接收焦点时（例如，通过单击），它会将焦点传递到其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可能为用户提供了一种在处理控件时询问关联标签是什么的方法。（这种关联可能不像视觉渲染那样明显。forlabel
在问题的第一个示例中（没有 ），标记的使用没有逻辑或功能意义——它是无用的，除非你在 CSS 或 JavaScript 中对它做一些事情。forlabel
HTML 规范不强制要求将标签与控件相关联，但 Web 内容可访问性准则 （WCAG） 2.0 强制要求。这在技术文档 H44：使用标签元素将文本标签与表单控件关联中进行了描述，该文档还解释了隐式关联（通过嵌套，例如 inside ） 不像显式关联 via 和 属性那样得到广泛支持，inputlabelforid
评论
11赞
ulty4life
8/14/2015
+1 用于讨论语义关系及其在功能点击关系之外的含义。
1赞
LoveToCode
8/1/2019
嗨，我有两个具有相同 id 但在不同 div 中的元素，我使用 label for 添加了焦点事件，但在第二个元素中它专注于第一个元素。<html> <body> <div id=“first_div”> <label for=“name”>Name</label> <input type=“text” id=“name”> </div> <div id=“second_div”> <label for=“name”>Name</label> <input type=“text” id=“name”> </div> </body> </html>
0赞
cyberconte
4/16/2021
HTML 规范规定 ID 必须是唯一的。不支持使用重复的 ID，并且会产生意想不到的后果，例如您正在经历的情况。
16赞
user4133690
10/14/2014
#4
简而言之，它的作用是引用输入，仅此而已：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">
评论
8赞
bean5
4/15/2015
添加 for 很重要，即使它们是相邻的。我似乎记得听说过一些视障人士的屏幕阅读器在其他方面存在问题。因此，如果您想对那些可能使用备用浏览器/屏幕阅读器的人友好，请使用此方法。
0赞
Pax
11/4/2019
#5
该属性显示此标签代表相关输入字段、复选框或单选按钮或与之关联的任何其他数据输入字段。
例如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>
0赞
pythag0ras_
1/16/2020
#6
它标记作为属性参数的任何输入。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>
4赞
F. Hauri - Give Up GitHub
1/25/2021
#7
以 html 形式使用label for=
这可以允许在视觉上分离标签和对象，同时保持它们的链接。
示例：有一个复选框和两个标签。
您可以通过冷漠地单击来选中/取消选中该框
- 任何标签或
- 在复选框上，
但不是在文本上，也不是在输入内容上......
<label for="demo1"> There is a label </label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. Nullam venenatis gravida orci.
<br />
<label for="demo1"> There is a 2nd label </label>
<input id="demo1" type="checkbox">Demo 1</input>一些有用的技巧
相同的示例，但有两个复选框和一些不同的 CSS 效果（例如在文本中写入：或反映复选框状态）。Select thisDeselect this
通过使用样式表功能，您可以做很多有趣的事情......CSS
body { background: #DDD; }
.button:before { content: 'S'; }
.box:before { content: '☐'; }
label.button { background: #BBB;
border-top: solid 2px white;border-left: solid 2px white;
border-right: solid 2px black;border-bottom: solid black 2px; }
#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .but2 { background: #CCC;
border-top: solid 2px black;border-left: solid 2px black;
border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: '☒'; }
#demo1:checked ~ .but1 { background: #CCC;
border-top: solid 2px black;border-left: solid 2px black;
border-right: solid 2px white;border-bottom: solid white 2px; }
#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="button but1">elect 1</label> -
<label for="demo2" class="button but2">elect 2</label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
<br />
<label for="demo1" class="but1 button">elect this 2nd label for box 1</label> -
<label class="but2 button" for="demo2">elect this other 2nd label for box 2</label>
<br /><br />
<label for="demo1" class="box box1"> check 1</label>
<label for="demo2" class="box2 box"> check 2</label>使用示例：仅使用 CSS 切换侧边栏（第 2 个代码段）。
在这个答案中，我只使用 CSS 和 label for 来添加一个侧边栏，可以在不使用任何 javascript 代码的情况下切换。
评论
0赞
F. Hauri - Give Up GitHub
2/3/2022
这个答案是在问题提出后 7 年、4 个月、4 周、2 天、上午 11 点、26 分 29 秒发布的。他的第一个赞成票是在 1 年零 3 周、4 天、13 小时 35 分 42 秒后获得的......
0赞
J_McCaffrey
2/10/2022
我从没想过它提供了多种东西，您可以单击以设置唯一的复选框。我喜欢
0赞
F. Hauri - Give Up GitHub
2/10/2022
@J_McCaffrey 如果你喜欢这个，也许你想要用法示例：使用 CSS 切换侧边栏只看第 2 个片段：toggle：checked。
下一个：嘲讽界面与嘲讽？
评论