Abundnce10 Abundnce10 - 2 months ago 6
CSS Question

Clicking the text to select corresponding radio button

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!

Answer

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>

Live example here.

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.