单击文本以选择相应的单选按钮
我使用PHP创建测验Web应用程序。每个问题由一个单独的<label>
组成,并且有4个可能的选择,使用radio buttons
来允许用户选择他/她的答案。单个问题的现有HTML看起来像:单击文本以选择相应的单选按钮
<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>
我想用户有点击与单选按钮关联的文本的选项。现在,用户只能点击单选按钮 - 我发现这是一项非常繁琐的任务。
我读了Unable to select a particular radio button choice by clicking on the choice text,并提出了使标签的for
和id
属性匹配的建议。我已经做到了这一点,但仍然无法正常工作。
我的问题是:我希望能够单击<input type="radio">
对象的文本,而不是只能够选择单选按钮本身。我知道我以前阅读过这篇文章,但似乎找不到解决我的问题的方法。任何帮助或建议非常感谢!
在你的代码中,你在表单本身上有一个标签。您想要在每个单独的电台组上放置标签,如下所示。
<form>
<p>What is my middle name?</p>
<br>
<input id="349" type="radio" value="1" name="question1">
<label for="349">Abe</label>
<br>
<input id="350" type="radio" value="2" name="question1">
<label for="350">Andrew</label>
<br>
<input id="351" type="radio" value="3" name="question1">
<label for="351">Andre</label>
<br>
<input id="352" type="radio" value="4" name="question1">
<label for="352">Anderson</label>
<br>
</form>
你应该记住两个元素不应该有相同的ID。 name
属性用于使单选按钮作为一组使用,并且一次只允许单个选择。
标签标签应该在每个答案的周围,例如,围绕安倍,安德鲁等等,而且每个人都需要独一无二。
如果根据Nathan的回答完成单选按钮和标签之间似乎有一个不可点击的空间。这里是如何让他们无缝地加入(见this article):
<form>
<p>What is my middle name?</p>
<br>
<label><input id="349" type="radio" value="1" name="question1">Abe</label>
<br>
<label><input id="350" type="radio" value="2" name="question1">Andrew</label>
<br>
<label><input id="351" type="radio" value="3" name="question1">Andre</label>
<br>
<label><input id="352" type="radio" value="4" name="question1">Anderson</label>
<br>
</form>
你可以像下面这样做
<label for="1">hi</label>
<input type="radio" id="1" />
所以,如果你点击文本或标签,它选择的单选按钮。 但是,如果你这样做......
<label for="1">//</label>
和您添加到我这之前刚写的代码,然后如果你点击第二个标签那么它也将选择收音机。
将输入标签嵌套在标签标签内可确保标签显示在单选按钮旁边。使用前面提到的方法,您可以将标签标签放置在html文件的任何位置,并在单击时选择相关的单选按钮。检查了这一点:
<html>
<body>
<form>
<p>What is my middle name?</p>
<br>
<input id="349" type="radio" value="1" name="question1">
<br>
<input id="350" type="radio" value="2" name="question1">
<label for="350">Andrew</label>
<br>
<input id="351" type="radio" value="3" name="question1">
<br>
<input id="352" type="radio" value="4" name="question1">
<label for="352">Anderson</label>
<br>
</form><br/>
<p>This is a paragraph</p>
<label for="349">Abe</label><br/>
<label for="351">Andre</label>
</body>
</html>
这样做,这样反而消除了这种缺陷:
<form>
<p>What is my middle name?</p>
<br>
<label>
<input id="349" type="radio" value="1" name="question1"/>Abe
</label>
<br>
<label>
<input id="350" type="radio" value="2" name="question1"/>Andrew
</label>
<br>
<label>
<input id="351" type="radio" value="3" name="question1"/>Andre
</label>
<br>
<label>
<input id="352" type="radio" value="4" name="question1"/>Anderson
</label>
<br>
</form>
优越简单。喜欢它当一个几乎隐藏的标签功能被重新发现 – foochow