HTML <label> 标签中的“for”属性有什么作用？

<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'>

这对于与复选框和按钮一起使用特别有用，因为这意味着您可以通过单击相关文本来选中该框，而不必点击该框本身。

Read more about the <label> element on MDN。

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

Read more on Accessibility

---

for 属性将标签与控件元素相关联，如 HTML 4.01 规范中 label 的描述中所定义。这意味着，除其他外，当 label 元素获得焦点（例如，通过单击）时，它将焦点传递给其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。 （这种关联可能不像在视觉渲染中那么明显。）

在问题的第一个示例中（没有 for），使用 label 标记没有逻辑或功能含义 - 它没有用，除非您在 CSS 或 JavaScript 中使用它。

HTML 规范并未强制将标签与控件关联，但 Web 内容可访问性指南 (WCAG) 2.0 可以。这在技术文档 H44: Using label elements to associate text labels with form controls 中进行了描述，该文档还解释了隐式关联（通过在 label 中嵌套例如 input）不像通过 for 和 id 属性的显式关联那样被广泛支持，

---

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

---

在 html 表单中使用标签 for=

这可以允许在视觉上分离标签和对象，同时保持它们的链接。

示例：有一个复选框和两个标签。

您可以通过随意单击任何标签或复选框来选中/取消选中该框，但不能单击文本或输入内容...

任何标签或

在复选框上，

有一个标签
客户应该很有帮助，他是一个肥胖的精英。他喜欢自制沙拉、篮球，以及作为作者发酵的各种米饭，如叶菜。课程很纯粹，但很纯粹。暖身。儿童和拱门。卡通梅塞纳斯。在 consectetuer, lorem eu lobortis egestas, velit hat empdiet eros, be amet sagitts now mi ac neque。但不是他自己。无毒妊娠诊所。
有第二个标签 Demo 1

一些有用的技巧

相同的示例，但具有 两个 复选框和一些不同的 CSS 效果（例如在文本中书写：Select this 或 Deselect this 反映复选框状态。）。

通过使用样式表 CSS 功能，您可以做很多有趣的事情...

身体{背景：#DDD; } .button:before { 内容：'S'; } .box:before { 内容：'☐'; } label.button { 背景：#BBB;边框顶部：纯色 2px 白色；边框左：纯色 2px 白色；右边框：纯黑色 2px；边框底部：纯黑色 2px； } #demo2:checked ~ .but2:before { content: 'Des'; } #demo2:checked ~ .but2 { 背景：#CCC;边框顶部：纯色 2px 黑色；边框左：纯色 2px 黑色；右边框：纯白色 2px；边框底部：纯白色 2px； } #demo2:checked ~ .box2:before { content: '☒'; } #demo1:checked ~ .but1 { 背景：#CCC;边框顶部：纯色 2px 黑色；边框左：纯色 2px 黑色；右边框：纯白色 2px；边框底部：纯白色 2px； } #demo1:checked ~ .but1:before { content: 'Des'; } #demo1:checked ~ .box1:before { content: '☒'; } Demo 1 Demo 2
elect 1 - elect 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, 发酵罐, rhoncus ut, ligula。 purus sed purus cursus iaculis 的菜豆。悬浮发酵液。 Pellentesque et arcu。 Maecenas viverra。在 consectetuer, lorem eu lobortis ...
选择框 1 的第二个标签 - 为框 2 选择另一个第二个标签

检查 1 勾选2

使用示例：仅使用 CSS 切换侧边栏（第二个片段）。

---

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

---

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>

---

它标记任何输入是 for 属性的参数。

我的第一个收音机标签
我的第二个收音机标签
我的第三个收音机标签

---