<label>标签中的“for”是什么意思？</label>

Question

我刚在 HTML 标签的 label 属性中看到了一个 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=参数吗？ （顺便问一下，它是做什么用的？）

我正在将此表单转换为 PHP 处理的脚本，是否可以省略 for= 参数? 顺便问一下，它的作用是什么？

- lynn

Answer 1

来自w3schools.org：

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

标签本身不会呈现为特殊元素。然而，它可以提高鼠标用户的可用性，因为如果用户单击标签元素内的文本，则切换控件。

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

补充一下我的 $.02 作为无障碍专家 - 标签还将输入字段与正确的标签关联起来，以便使用屏幕阅读器的人了解该字段所用途。

- Jonas

---

如果用户点击标签元素内的文本，则切换控件。 - Kamil Lelonek

Answer 2

HTML的标签定义了表单元素的标签。它们通常与复选框和单选按钮一起使用，当用户单击标签时，它会切换按钮状态。对于文本输入框（您需要检查以确保），我认为仅在用户单击标签时才会将焦点放到输入框中。

- Bill the Lizard

---

这是创建自定义复选框和单选按钮的重要部分。 - vancy-pants

Answer 3

它指定标签绑定到哪个元素。在您的示例代码中，该标签存在于required-firstname输入字段的前面。如果用户点击该标签，焦点将转移到绑定的输入字段。这是一个提高可用性的改进，我认为最好保留它。这是一个好习惯。

- Pawel Krakowiak

Answer 4

“for”属性是表单可访问性的必要元素，不要省略它。对于使用屏幕阅读器（SR）阅读网页的人来说，“for”属性将控件与标签相关联。通常，SR用户会通过一个表单进行制表符，从一个控件（对于SR而言是一个可聚焦的元素）到下一个控件。如果没有“for”属性，SR用户将不得不在SR上更改模式并在表单周围探测以确定哪个控件匹配哪个标签，这可能耗时且令人困惑。 “for”属性也可以用于辅助技术，解决运动问题。

WebAIM.org有一个很好的页面，解释了“for”属性的可访问性影响：http://webaim.org/techniques/forms/controls

- user3219915

Answer 5

它将标签与表单元素ID绑定在一起。某些表单元素，如复选框，可以通过单击其标签来激活。

- VirtuosiMedia

Answer 6

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

- Peter Turner