使用“标签”的单选按钮(Using “label for” on radio buttons)

2019-07-21 04:19发布

当使用在单选按钮的参数了“标签”,以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节要求联邦机构提供软件和网站的无障碍残疾人士。

Answer 1:

你几乎得到了它。 它应该是这样的:

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

在该值for应该是你的标签元素的ID。



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属性是第二个版本(含标签输入)可选的,但IIRC有一些旧版本浏览器并没有使标签文本点击,除非你包括它。 第一版本(输入后标签)是更容易风格使用相邻兄弟选择CSS +

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


Answer 3:

(首先读出已经说明了其他的答案for<label></label>标签。同时,双方顶部的答案是正确的,但对于我的挑战,它是当你有几个单选框,你应该为他们选择一个共同的名称,name="r1" ,但不同的IDS 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> 



文章来源: Using “label for” on radio buttons