关于 HTML 标签的“For”属性 [重复]

Posted 2023-02-22

【中文标题】关于 HTML 标签的“For”属性 [重复]

【英文标题】：Regarding the HTML Label's "For" Property [duplicate]

【发布时间】：2011-03-09 17:51:56

【问题描述】：

考虑以下 2 行代码（复制自 w3schools.com > “html for Attribute”）：

  <label for="male">Male </label>
  <input type="radio" name="sex" id="male" />

我无法发现上述标签的“for”属性的确切用途。如您所见，它当前设置为“男性”（以匹配输入控件的 id）。

到目前为止，我所读到的只是上面的代码将标签与输入控件“关联”和“绑定”。 所以我的问题是，这到底是什么意思？

将标签关联到输入控件的具体结果是什么？ 标签和/或输入是否由于这种“关联”而具有新的行为？

【问题讨论】：

你们工作很快，谢谢你们的许多答案，我希望我能给你们打勾:)

@user 这个问题是 2010 年 6 月 29 日 16:53 提出的，而您的实际副本是 2013 年 8 月 25 日 18:40 提出的。

【参考方案1】：

通过for 与控件关联的label 将是可点击的。单击它选择控件。特别是对单选/复选框非常有用。它还对视障人士的屏幕阅读器具有辅助功能。

【讨论】：

+1 点击文本，绑定的 元素将被选中

+1 好工作，如果你使用 for=""> 也值得注意，for 必须映射到输入元素的ID，而不是它的名称。跨度>

值得注意的是，您可以通过将input 标记包含在label 标记中来获得相同的行为，如下所示：jsfiddle.net/makeblake/9y86g

另外值得注意的是，具有隐藏输入类型的 for 属性不是 W3C 有效的。

【参考方案2】：

当您点击标签（男）时，如果您不使用标签，将检查收音机，这是不可能的。在为移动设备等小型设备进行开发时，标签也很有用。

所以，它对：

可访问性原因 手机等小型设备 在单选按钮和复选框中特别有用

【讨论】：

呃，是label，不是lable。

@ceejayoz：是的，一个错字，已修复，谢谢

链接的内容有变化吗？我没有找到信息。

【参考方案3】：

我相信将标签链接到表单元素可以让您为label 分配一个访问键，这会将焦点带到与之关联的表单元素上。

正如其他人所提到的，它还允许您单击 label 并将焦点放在表单元素上。

for 属性允许您将label 和元素放置在 html 的语义不同区域，并保持关联。 （比如两个表，或者两个不同的 div）。如果您像在示例中一样将它们放在一起，则将表单元素包含在标签中并放弃for 属性也是正确的

【参考方案4】：

是的，我相信它在网页上填写表单时充当表单控件或检查机制，尤其是带有单选按钮或复选框的表单。通过单击标签，它将用户直接指向表单上应键入正确信息的区域。例如，“文本”。或者，在用户必须从某些选项中进行选择的情况下，例如真或假、男性或女性。