Html 在单选按钮上使用“标签”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1527721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using "label for" on radio buttons
提问by Marc W
When using the "label for" parameter on radio buttons, to be 508 compliant*, is the following correct?
在单选按钮上使用“label for”参数时，要符合508*，以下是否正确？
<label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>
or is this?
或者这是？
<input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>
Reason I ask is that in the second example, "label" is only encompassing the text and not the actual radio button.
我问的原因是在第二个示例中，“标签”仅包含文本，而不包含实际的单选按钮。
*Section 508 of the Rehabilitation Act of 1973 requires federal agencies to provide software and website accessibility to people with disabilities.
* 1973 年《康复法案》第 508 条要求联邦机构为残疾人士提供软件和网站可访问性。
回答by Marc W
You almost got it. It should be this:
你几乎明白了。应该是这样的：
<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>The value in forshould be the id of the element you are labeling.
中的值for应该是您要标记的元素的 id。
回答by Martha
Either structure is valid and accessible, but the forattribute should be equal to the idof the input element:
任一结构都是有效且可访问的，但for属性应等于id输入元素的 ：
<input type="radio" ... id="r1" /><label for="r1">button text</label>
or
或者
<label for="r1"><input type="radio" ... id="r1" />button text</label>
The forattribute is optional in the second version (label containing input), but IIRC there were some older browsers that didn't make the label text clickable unless you included it. The first version (label after input) is easier to style with CSS using the adjacent sibling selector +:
该for属性在第二个版本中是可选的（包含输入的标签），但是 IIRC 有一些旧的浏览器不会使标签文本可点击，除非你包含它。第一个版本（输入后的标签）使用相邻的兄弟选择器更容易使用 CSS 设置样式+：
input[type="radio"]:checked+label {font-weight:bold;}
回答by Ebrahim
(Firstly read the other answers which has explained the forin the <label></label>tags.
Well, both the tops answers are correct, but for my challenge, it was when you have several radio boxes, you should select for them a common namelike name="r1"but with different idsid="r1_1" ... id="r1_2"
（首先阅读已for在<label></label>标签中解释的其他答案。好吧，两个顶部的答案都是正确的，但对于我的挑战，当您有多个单选框时，您应该为它们选择一个通用名称，例如name="r1"但具有不同的 idid="r1_1" ... id="r1_2"
So this way the answer is more clear and removes the conflicts between name and ids as well.
这样一来，答案就更清楚了，并且消除了名称和 ID 之间的冲突。
You need different ids for different options of the radio box.
您需要为单选框的不同选项使用不同的 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>