I'm creating a quiz web application using PHP. Each question is comprised of a separate <label>
and has 4 possible choices, using radio buttons
to allow the user to select his/her answer. The current HTML for a single question looks like:
<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>
I would like the user to have the option of clicking on the text associated with radio button. Right now, the user can only click on the radio button itself - which I find to be a quite cumbersome task.
I read Unable to select a particular radio button choice by clicking on the choice text and the suggestion points toward making the for
and id
attributes of the tags match. I have done this and it still doesn't work.
My question is: I'd like to be able to click the text of an <input type="radio">
object, as opposed to only being able to select the radio button itself. I know I've read about this before but can't seem to find any solution to my problem. Any help or suggestions are much appreciated!
In your code, you've got a label on the form itself. You want to put labels on each individual radio group, as shown below.
<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>
You should keep in mind that two elements should never have the same ID. The name
attribute is used so that the radio buttons function as a group and only allow a single selection at a time.