-label-的for属性的简单探索

在freecodecamp上HTML教程的CreateaSetofRadioButtons部分，看到这样一段话，在label元素上设置for属性被认为是最佳实践，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子输入元素之间创建链接关系。大概意思是：最好的办法是给label加上一个与input标签的id属性值相同的for属性，来建立label和input之间的关联。同时给出示例代码如下：Indoor代码中，label的for属性的值与input的id属性的值相同。从这段代码看，并不清楚连接在哪里。即使删除了for属性，运行结果也没有区别。在w3schools上，标签的for属性定义如下：for属性指定标签绑定到哪个表单元素。翻译：for属性指定标签绑定到表单中的哪个元素。示例代码：男
女
其他
根据w3schools提供的定义和示例代码可以看出，如果for属性和id属性相同，label和input是一一对应的。对比两段代码，不难发现标签和输入标签的包含关系是不一样的。代码1的标签和输入属于包含关系，代码2的标签和输入是相对独立的。标签和输入在页面上的排列方式不同。通过Chrome的开发者工具（快捷键Ctrl+Shift+i）不难发现，代码1的运行结果，label标签包含input标签，代码2的运行结果，label标签和input标签并列。标签与输入一一对应。点击标签的内容，对应的单选按钮就会被选中。如果我们把两段代码中label的for属性去掉，上面的1和2点仍然有效，变化的是第3点。至于代码1的运行结果，如果点击文本内容标签，您仍然可以选择单选按钮。因为输入包含在标签中。但是代码2不一样，点击标签的内容，单选按钮不能被选中。通过代码运行结果的简单对比，我们可以验证文章开头引用的那段话是正确的。给标签加上for属性可以提高代码质量。