Clicking the text to select corresponding radio button

Question

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 1

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.

Answer 2

There seems to be a little unclickable space between the radio button and the label if done according to Nathan's answer. Here is how to make them join seamlessly (see 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>