标签标签中的“for”是啥？

Posted 2023-04-13

【中文标题】标签标签中的“for”是啥？

【英文标题】：What's the "for" for in a label tag?标签标签中的“for”是什么？

【发布时间】：2010-10-16 10:16:53

【问题描述】：

刚刚在 html 标签标签中遇到了 for 参数：

<label for="required-firstname"> First Name </label>
<small>*</small>
<input name="required-firstname" type="text" tabindex="2" 
       id="required-firstname" size="24" maxlength="40">

我正在将此表单转换为 php 处理的脚本，我可以去掉 for= 参数吗？ （出于好奇，它有什么作用？）

【参考方案1】：

来自 w3schools.org：

标签定义了输入元素的标签。

标签元素不会为用户呈现任何特殊的东西。但是，它为鼠标用户提供了可用性改进，因为如果用户单击标签元素中的文本，它会切换控件。

标签的for属性应该等于相关元素的id属性才能将它们绑定在一起。

HTH！

将我的 $.02 添加为 Accessibility SME - 以及可用性，LABEL 还将输入字段与正确的标签相关联，以便使用屏幕阅读器的人知道该字段的用途。

【讨论】：

+1 if the user clicks on the text within the label element, it toggles the control.

【参考方案2】：

HTML 标签标签定义表单元素的标签。它们通常与复选框和单选按钮一起使用，当用户单击标签时，它会切换按钮。使用文本输入（您必须检查以确保）我认为它只会在用户单击标签时将焦点放在输入上。

【讨论】：

这是制作自定义复选框和单选按钮的重要部分。

【参考方案3】：

它指定标签绑定到哪个元素。在您的示例代码中，标签位于 for required-firstname 输入字段中。如果用户单击该标签，焦点将转到绑定的输入字段。这是一个可用性改进，我认为你最好保持原样。这是一个很好的做法。

【参考方案4】：

“for”属性是表单可访问性的必要元素。不要省略它。对于使用屏幕阅读器 (SR) 向他们宣布网页的用户，“for”属性将控件与标签相关联。通常，SR 用户将在表单中从一个控件（SR 的可聚焦元素）切换到下一个控件。如果没有“for”属性，SR 用户将不得不更改 SR 上的模式并围绕表单进行探测以尝试确定哪个控件与哪个标签匹配，这可能既耗时又令人困惑。 “for”属性也可用于与运动问题相关的辅助技术。

WebAIM.org 有一个很棒的页面来解释“for”的可访问性后果：http://webaim.org/techniques/forms/controls

【参考方案5】：

它将标签与表单元素 id 联系起来。某些表单元素，例如复选框，可以通过单击其标签来激活。

【参考方案6】：

在某些浏览器中，当您单击 for 标记中的文本时，您会选中与之关联的框（即 for = id）或将焦点放在该框上。这是 ADA 的事情