HTML for 属性 - 绿叶网

HTML for 语法

在 HTML 中，for 属性用于 label 和 output 这 2 个元素。

当 for 用于 label 元素时：它用于指定当前 label 与哪个表单元素相关联。然后当我们单击 label 元素时，其所关联的表单元素也会获得焦点。
当 for 用于 output 元素时：它用于指定当前 output 元素与哪个表单元素相关联，以显示计算结果。

语法：

<label for="表单元素id">标签文本</label>

<output for="表单元素id1 表单元素id2">计算结果</output>

说明：

对于 label 标签的 for 属性来说，它有以下 2 个主要作用。

语义上绑定：它在语义上将 label 元素和表单元素关联起来，对于屏幕阅读器和其他辅助技术非常重要，有助于提升可访问性。
增强可用性：当我们点击 label 中的文本时，其所关联的表单元素也会获得焦点或被激活，扩大了点击区域。从而提升了用户体验，尤其是在移动设备上。

此外，小伙伴们还要清楚以下几点。

for 属性的值必须和目标表单元素的 id 完全一致。
一个 label 只能通过 for 属性绑定一个表单元素。
output 的 for 属性可以同时绑定多个表单元素，用空格分隔即可。

注意: 如果使用 React 或其他 JSX 语法进行开发，for 属性需要写成 htmlFor，比如：<label htmlFor="email">邮箱</label>。这是因为 for 是 JavaScript 中的循环关键字，写成 htmlFor 是为了避免冲突。

HTML for 摘要

适用元素	label 或 output
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML for 示例

接下来，我们通过几个简单的例子来讲解一下 HTML for 属性是如何使用的。

示例 1：label 元素的 for 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <input id="rdo1" type="radio"/>单选框
        <input id="cbk1" type="checkbox">复选框
    </div>
    <hr>
    <div>
        <input id="rdo2" name="rdo" type="radio"/><label for="rdo2">单选框</label>
        <input id="cbk2" name="cbk" type="checkbox"><label for="cbk2">复选框</label>
    </div>
</body>
</html>

页面效果如下图所示。

HTML label元素的for属性

分析：

在第 1 组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。但在第 2 组表单中，我们不仅可以通过点击单选框来选中单选框，通过点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的。

其实，这就是 label 标签 for 属性的作用。for 属性使得鼠标单击的范围扩大到 label 元素上，极大地提高了用户单击的可操作性。事实上，label 标签有 2 种关联方式，我们拿复选框来说，下面 2 种方式是等价的。

<!--方式1-->
<input id="cbk" type="checkbox"><label for="cbk">复选框</label>

<!--方式2-->
<label><input id="cbk" type="checkbox">复选框</label>

示例 2：output 元素的 for 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form>
        <input type="number" id="num1" value="10"><br>
        <input type="number" id="num2" value="20"><br>
        <output for="num1 num2">相加结果：30</output>
    </form>
</body>
</html>

页面效果如下图所示。

HTML output元素的for属性

分析：

在 output 元素中，for 属性的值是一个空格分隔的列表，其中包含用于创建输出的元素的 id 值。

需要清楚的是，output 元素本身不会自动计算结果，它只是语义上表示计算结果的容器。