如果目标输入框嵌套在HTML标签内，那么是否需要使用“for”属性？

Question

我注意到当你把输入元素放入标签元素中时，HTML标签不需要使用“for”属性：

<label><input type="text">Last name</label>

但我想知道最佳实践是什么。有人能帮我吗？

谢谢！

- Raapwerk

---

就像WebMonster所说，按照你的方式去做是可以的。只要在整个代码中保持一致即可。 - WWW

我今天注意到Bootstrap的文档在同一表单中同时使用了这两个属性。看起来，如果您不能或不想将<input>放在<label>内部，则for属性仅适用于后者，并且两种方法都可以接受。 - Blazemonger

我也有这个问题。许多在线“答案”假装问题是是否根本不将标签与特定元素相关联，好像提问者不关心可访问性。这不是问题所在。问题是当标签直接包含带标签的元素时，是否使用for是技术上多余的；如果使用，为什么？ - Jeff Schwab

Answer 1

该标签用于屏幕阅读器等辅助功能，例如：

使用label元素使HTML表单可访问

因此，您应该使用它。这里有一个链接，以使您了解通达性的重要性。

这里有个小故事-使您的网站可访问可以惠及所有用户-我一直很惊讶市政当局为轮椅通行设施付出的努力，直到我有了女儿并使用婴儿车。我认为网站也遵循同样的规则-每个人都受益。

抱歉我有点啰嗦了。

- Crab Bucket

---

嗯，工作太多了。先让你的网站运行起来，如果你有空闲时间，再添加所有的可访问性内容。 - NoName

尽管您的网站没有真正“运行”，如果许多用户无法使用它（由于无法访问），那么就没有意义。 - Dave

Answer 2

根据W3 HTML 5.2标准和WhatWG Living Standard（引用自后者）的几乎相同的表述：

for属性可以用来指示将标题与哪个表单控件相关联。如果指定该属性，则该属性的值必须是与label元素在同一棵树中的可标记元素的ID。如果指定了该属性，并且在树中有一个元素的ID等于for属性的值，并且第一个这样的元素按照树的顺序是可标记元素，则该元素是标签元素的标记控件。

因此，在遵循HTML标准方面，使用它是可以的。

- WebMonster

Answer 3

对于文本输入框，for属性并没有太大的作用，但是在复选框输入框中非常有用，因为它允许用户既可以点击标签，也可以点击复选框本身：

<label for="chk">Checkbox</label><input type="checkbox" id="chk" />

- Jonathan Sayce

---

一个输入标签可以在标签内部。请参见https://dev.w3.org/html5/spec-LC/forms.html#writing-a-form-s-user-interface - Sarath S Menon

感谢@SarathSMenon - 我已经删除了那一部分。 - Jonathan Sayce

Answer 4

您可以在中包含，并将其与相关联，或者如果由于某种原因必须将元素放置在DOM的其他位置，则可以使用属性指定其含义。无论哪种方式，使用属性都不会有任何问题 :)

- kontur