在单选按钮上使用"label for"的方法

Question

在radio buttons上使用"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节要求联邦机构向残疾人提供软件和网站无障碍服务。

- Wilkie

Answer 1

你差不多理解了。应该是这样的：

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

< p >在 < code >for 中的值应该是你要标记的元素的ID。< /p >

- Marc W

---

当然，你的答案是正确的，但是Martha的答案才是正确的。Martha的两个例子都是完全有效的HTML5代码。例如，如果您想让整个内容呈现在一个框架中，使用CSS更容易样式化第二个示例。如果您想在其他地方放置标签，则应该使用第一个示例。但是两个示例都可以。最好的问候！ - Jacek Kowalewski

怎么让一个标签在两个单选按钮之间切换？你不能有两个相同的ID... :/ - Neil S3ntence

@NilsSens 每个单选框和标签对都应该有唯一的ID，它们不应该共享ID。 - Daniel Waters

@NilsSens 在两个单选按钮之间切换，而且它们只有一个标签？这听起来像是使用复选框的明显情况 :D - T_D

啊，我的意思是一个超级标签，可以切换单选按钮。 比如：类别最喜欢的水果，当你点击它时，你可以在“香蕉”和“草莓”之间切换。因为，为什么要强制鼠标移动用户体验，当你可以只切换选项呢。今天，我会使用JS手动编码，但如果有CSS-only的方法，那将是很有趣的。 - Neil S3ntence

Answer 2

无论哪种结构都是有效和可访问的，但for属性应该等于输入元素的id：

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

或者

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

第二个版本中（标签包含输入框），for属性是可选的，但是我记得一些旧的浏览器如果不包括它可能会使标签文本无法被点击。第一个版本（输入框后面的标签）更容易使用邻近兄弟选择器+来进行CSS样式设置：

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

- Martha

---

没问题，虽然在第二个例子中，“for”属性并不是必需的，但它仍然有效。 - Ishmael

我认为有些浏览器版本只有在使用 'for' 属性时，才会使按钮文本 "可点击"，即仅将输入包装在标签内是不够的。 - Martha

@Martha - 你知道是哪些浏览器吗？ - Kirkland

@Kirkland - http://www.w3.org/TR/html401/interact/forms.html#h-17.9 似乎表明第二个表单是有效的，但是有几个来源指出支持可能不普遍。无论如何最好在任何情况下都提供“for”属性。 - Ishmael

@RalphDavidAbernathy 是的，对于复选框也适用相同的规则。 - Ishmael

Answer 3

首先阅读其他回答，这些回答已经解释了<label></label>标签中的for。好的，两个最佳答案都是正确的，但对于我的挑战，当您有多个单选框时，您应该为它们选择一个共同的名称，例如name="r1"，但是要使用不同的id，例如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>

- Ebrahim