在关于freecodecamp的HTML教程中的CreateaSetofRadioButtons一节中，我看到了这段话。

它被认为是在标签元素上设置属性的更佳实践，其值与输入元素的heid attribute的评估值相匹配。这允许assistive technologies在标签和子项输入元素之间创建一个链接关系。

更好的方法是给标签添加一个for属性，其值与输入标签的id属性的值相同，从而在标签和输入之间创建一个关联。

同时，示例代码如下所示：

！-代码1 -

labelfor='室内'

inputid='室内' type='收音机' name='室内-室外'室内

/label

499006772-5b 6 ABA 4 e 9 b8 a 8 _ articlex . png

在代码中，标签的for属性值与输入的id属性值相同。从这段代码中，你看不到关联在哪里。

标签的for属性定义如下：

该属性指定了Theforattributespecifieswhichformelementalabelisboundto。

for属性指定标签绑定到表单中的哪个元素。

示例代码：

！-代码2 -

formaction='/action_page.php '

input type=' radio ' name=' gender ' id=' maly ' value=' maly '

labelfor='男性'男性/标签

英国铁路公司

input type=' radio ' name=' gender ' id=' meeting ' value=' meeting '

标签=女性女性/标签

英国铁路公司

input type=' radio ' name=' gender ' id=' other ' value=' other '

标签或='其他'其他/标签

英国铁路公司

输入类型='提交'值='提交'

/form

2064555765-5b 6 ABA 13d 54 a3 _ articlex . png

对比这两个代码，不难发现，

标签和输入标签的包含关系不同。Code1的标签和输入属于包含关系，Code2的标签和输入相对独立。

标签和输入在页面上的排列方式不同。通过Chrome开发者工具不难发现，在Code1的运行结果中，输入标签被标签标签覆盖，在Code2的运行结果中，标签标签与输入标签并列。

标签和输入是一一对应的。点击标签内容，会选择对应的单端按钮。

如果我们删除两个代码中标签的for属性，个和第二个点将保持不变，但第三个点将发生变化。对于Code1的操作结果，点击标签的内容，单选按钮仍然可以选择。Code2的不一样。如果单击标签的内容，则不能选择单选按钮。

简单对比一下代码运行结果，就可以验证文章开头引用的段落是否正确。将for属性添加到标签中可以提高代码质量。

本文转载自中文网站