在freecodecamp上HTML教程的Create a Set of Radio Buttons
这一节中,看到这样一段话,
It is considered best practice to set afor
attribute on thelabel
element, with a value that matches the value of theid
attribute of theinput
element. This allows assistive technologies to create a linked relationship between the label and the childinput
element.
大概的意思是:最好的做法,是给label
标签,添加for
属性,其值与input
标签的id
属性的值相同,以在label和input之间创建关联。
同时,给出一段示例代码,如下:
<!-- Code 1 -->
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
代码中,label
的for
属性值与input
的id
属性值相同。从这段代码中,并不能看出关联在何处。即使将for属性删除,运行结果也没有差别。
在w3schools上,关于label的for属性的定义如下:
The for attribute specifies which form element a label is bound to.
译文:for属性指定label与表单中的哪个元素进行绑定。
示例代码:
<!-- Code 2 -->
<form action="/action_page.php">
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<br>
<input type="radio" name="gender" id="other" value="other">
<label for="other">Other</label>
<br>
<input type="submit" value="Submit">
</form>
根据w3schools提供的定义和示例代码,可以看出for属性和id属性相同的话,label和input是一一对应的关系。
对比两段代码,不难发现,
- label与input标签的包含关系不同。Code 1 的label和input,属于包含关系,Code 2 的label和input相对独立。
- label与input在页面上的排列方式不同。通过Chrome的开发者工具(快捷键Ctrl + Shift + i)不难发现,Code 1 的运行结果,label标签将input标签包含,Code 2 的运行结果,label标签与input标签并列。
- label与input一一对应。点击label的内容,对应的单选按钮都会被选中。
如果,我们将两段代码中label的for属性删除,上述的第1点和第2点依然成立,变化的是第3点。
Code 1 的运行结果,点击label的文字内容,依旧能够选中单选按钮。因为input包含在label中。而 Code 2 的则不同,点击label的内容,无法选中单选按钮。
经过简单的代码运行结果对比,我们能够验证文章开头引用的那段话是正确的。为label添加for属性的这个做法,能够提高代码质量。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。