使用“标签”在单选按钮上

发布于 2024-08-07 12:34:53 字数 559 浏览 6 评论 0原文

在单选按钮上使用“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>

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

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

原文

When using the "label for" parameter on radio buttons, to be 508 compliant*, is the following correct?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗喜 2024-08-14 12:34:53

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

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

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

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 for should be the id of the element you are labeling.

回复收藏 0 原文

傻比既视感 2024-08-14 12:34:53

任一结构都是有效且可访问的，但 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;}

Either structure is valid and accessible, but the for attribute should be equal to the id of the input element:

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

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

The for attribute 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 +:

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

回复收藏 0 原文

太阳男子 2024-08-14 12:34:53

（首先阅读其他答案，其中解释了标签中的 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>

(Firstly read the other answers which has explained the for in 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 name like name="r1" but with different ids id="r1_1" ... id="r1_2"

So this way the answer is more clear and removes the conflicts between name and ids as well.

You need different ids for different options of the radio box.

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

回复收藏 0 原文

~没有更多了~