HTML<label>标签中的“for”属性是用来做什么的？

Question

HTML<label>标签中的“for”属性是用来做什么的？

460

我想知道以下两个代码片段的区别：

<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或是否有其他必要原因？

- jeff

相关帖子 - 如果目标输入位于标签内部，HTML标签中的“for”属性是否必要？ - RBT

7个回答

64

for 属性将标签与控件元素关联起来，如 HTML 4.01 规范中 label 的描述所定义。这意味着，当 label 元素获得焦点（例如通过单击它），它会将焦点传递给其关联的控件。一个标签和控件之间的关联也可以被语音用户代理使用，这些代理用户可以询问与控件关联的标签是什么。（在视觉渲染中，这种关联可能不是很明显。）

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

HTML 规范没有强制要求将标签与控件关联起来，但 Web 内容无障碍指南（WCAG）2.0 要求这样做。这在技术文档H44：使用标签元素将文本标签与表单控件关联中有所描述，该文档还解释了通过嵌套（例如将 input 嵌套在 label 内）的隐式关联不如通过 for 和 id 属性进行的显式关联得到广泛支持。

- Jukka K. Korpela

11

谈论语义关系及其意义超出了功能性点击关系，给予一分。 - ulty4life

1

你好，我有两个不同div中具有相同id的元素。我使用label for添加了focus事件，但在第二个元素上它会聚焦于第一个元素。 <html> <body> <div id="first_div"> <label for="name">姓名</label> <input type="text" id="name"> </div> <div id="second_div"> <label for="name">姓名</label> <input type="text" id="name"> </div> </body> </html> - LoveToCode

HTML规范规定id必须是唯一的。重复的id不受支持，会导致意想不到的后果，就像你现在遇到的问题一样。 - cyberconte

16

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

- user4133690

8

即使它们是相邻的，添加一个 for 循环也很重要。我记得听说一些针对视觉障碍人士的屏幕阅读器会出现问题。因此，如果你想友好地对待可能使用替代浏览器/屏幕阅读器的人，请使用这种方法。 - bean5

4

在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效果（例如在文本中写入：选择此项或取消选择反映复选框状态）。

通过使用样式表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实现侧边栏切换（第二段代码）。

在这个回答中，我只使用了CSS和label for来添加一个侧边栏，无需任何javascript代码即可进行切换。

- F. Hauri - Give Up GitHub

这个答案是在问题发布后7年4个月4周2天11点26分29秒发布的。他的第一个赞同是在1年3周4天13小时35分42秒后授予的... - F. Hauri - Give Up GitHub

我从未想过它可以提供多个可点击的选项，以设置唯一的复选框。我喜欢这种方式。 - J_McCaffrey

@J_McCaffrey 如果您喜欢这个，也许您会喜欢使用示例：仅使用CSS切换侧边栏，请查看第二个片段：toggle:checked。 - F. Hauri - Give Up GitHub

2

标签的for属性应该和相关元素的id属性相等，这样它们才能联系在一起。

- Rahul Tripathi

10

好的，您的问题是：“是的，但是您所说的“将它们绑在一起”是什么意思？它们已经是HTML结构中的相邻元素了。这就是我不理解的地方。” - jeff

2

FOR指定标签绑定的表单元素。 - Rahul Tripathi

2

@CengizFrostclaw http://jsfiddle.net/DmSGh/ --- 尝试点击“在此输入”文本并查看发生了什么。 - JJJ

1

@CengizFrostclaw：一个标签可以通过使用“for”属性绑定到一个元素。 - Rahul Tripathi

1

有一些不错的功能，例如当您使用单选按钮时。单击标签实际上会切换单选按钮。当您尝试使用自定义UI的单选按钮时，这是一个不错的功能。 - Alex

请查看以下功能：- http://www.euclidsfifth.com/development/for-attribute-used-wit-label-tags/ 和 http://www.webmasterworld.com/forum21/7407.htm - Rahul Tripathi

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_

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>

- Pax

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barmar · Accepted Answer

<label>标签允许您点击标签，它会被视为单击相关联的输入元素。有两种方法可以创建此关联：

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

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

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

了解更多关于辅助功能的信息

HTML<label>标签中的“for”属性是用来做什么的？

在HTML表单中使用label for=

一些有用的技巧

使用示例: 仅使用CSS实现侧边栏切换（第二段代码）。

在HTML表单中使用`label for=`