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

Posted 2023-03-05

【中文标题】在单选按钮上使用“label for”

【英文标题】：Using "label for" on radio buttons

【发布时间】：2010-12-04 09:43:05

【问题描述】：

参数时，为508 compliant*，以下是否正确？

 <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>

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

*1973 年《康复法案》第 508 条要求联邦机构向残障人士提供软件和网站可访问性。

【参考方案1】：

你几乎明白了。应该是这样的：

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

for 中的值应该是您要标记的元素的 id。

【讨论】：

你的回答当然是对的，但玛莎有正确的答案。 Martha 的两个示例都是完全有效的 html5。例如，如果您希望整个事物都在一个框架中，则使用 css 设置第二个框架会更容易。如果您希望标签位于其他位置，请使用第一个。但两者都可以。最好的问候！

嗯..如何让一个标签在两个单选按钮之间切换？你不能有两个相同的 ID...：/

@NilsSens 每个收音机和标签对都应该有唯一的 ID，它们绝不应该共享 ID

@NilsSens 在 2 个单选按钮之间切换，它们只有 1 个标签？这听起来像是一个使用复选框的明确案例：D

啊，不是我的意思是一个切换单选按钮的超级标签。喜欢：最喜欢的水果类别，当您单击该类别时，您会在 idk "banana" 和 "strawberry" 之间切换因为，当您可以切换选项时，为什么要强制执行鼠标移动 UX。今天，我会使用 JS 来手动编写代码，但如果有一个 CSS 唯一的方法会很有趣:)

【参考方案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 属性在第二个版本中是可选的（包含输入的标签），但 IIRC 有一些较旧的浏览器不会使标签文本可点击，除非您包含它。第一个版本（输入后的标签）使用相邻的兄弟选择器+ 更容易使用 CSS 设置样式：

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

【讨论】：

是的，虽然在第二个示例中，“for”属性不是必需的。

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

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

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 似乎表明第二种形式是有效的，但有几个来源表明支持可能并不普遍。无论如何，最好提供for 属性。

@RalphDavidAbernathy 是的，同样的规则适用于复选框。

【参考方案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>