在单选按钮上使用“ label for”

当在单选按钮上使用“ label for”参数时，508号就绪 * 是否正确？

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

还是这样？

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

我问这个问题的原因是，在第二个示例中，“ label”只包含文本，而不包含实际的单选按钮。

* 1973年《康复法》第508条要求联邦机构向残疾人提供无障碍软件和网站。

202648 次浏览
小开
最佳答案

差不多了，应该是这样:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

for中的值应该是正在标记的元素的 id。

小开

这两种结构都是有效且可访问的，但是 for属性应该等于 input 元素的 id:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

或者

<label for="r1"><input type="radio" ... id="r1" />button text</label>

在第二个版本中，for属性是可选的(标签包含输入) ，但是 IIRC 有一些较老的浏览器不允许单击标签文本，除非您包含它。第一个版本(输入后的标签)使用相邻的兄弟选择器 +更容易用 CSS 设计样式:

input[type="radio"]:checked+label {font-weight:bold;}
小开

(首先阅读在 <label></label>标签中解释了 for的其他答案。 嗯，两个最高的答案都是正确的，但是对于我的挑战，是当你有几个收音机盒子，你应该为他们选择 一个普通的名字喜欢 name="r1" 但身份不同 id="r1_1" ... id="r1_2"

因此，这种方式的答案更加明确，并消除了名称和 id 之间的冲突。

对于收音机的不同选项，您需要不同的 id。

<input type="radio" name="r1" id="r1_1" />


<label for="r1_1">button text one</label>
<br/>
<input type="radio" name="r1" id="r1_2" />


<label for="r1_2">button text two</label>
<br/>
<input type="radio" name="r1" id="r1_3" />


<label for="r1_3">button text three</label>


提交答案