95

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!

Community
  • 1
  • 1
Abundnce10
  • 2,150
  • 3
  • 26
  • 41

7 Answers7

189

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.

Zze
  • 18,229
  • 13
  • 85
  • 118
Nathan
  • 6,772
  • 11
  • 38
  • 55
43

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>
user21820
  • 569
  • 8
  • 17
  • 2
    I prefer this answer. But are you sure you even need the "for" attributes with this approach? – Piddu Jan 23 '17 at 11:21
  • @Piddu: I think you're right, so I've updated my answer. Thanks! – user21820 Jan 23 '17 at 11:30
  • Another option to avoid the extra space between the radio button and label, is to simply not put it there `` (no spaces or newlines between the tags) – Arye Eidelman Jun 11 '18 at 01:49
  • @AryeDovEidelman: Your solution does not work for Firefox, whereas mine does. =) – user21820 Jun 11 '18 at 03:59
  • 1
    I just tested my way in chrome and firefox and found that it reduces the unclickable space from 7 to 3 pixels by removing the space character. see [why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements](https://stackoverflow.com/questions/19038799). the three remaining pixels are the default right margin on the radio button `margin: 3px 3px 0 5px;` (it's more noticeable in firefox as there is a hover effect by default) which can be fixed with CSS by removing the margin and replacing it with padding. – Arye Eidelman Jun 11 '18 at 17:10
  • 1
    @AryeDovEidelman: I see, thanks for investigating! Though for simplicity I will stick to encasing the whole thing in the label. =) – user21820 Jun 11 '18 at 17:16
  • please give me your email address or any other contact regarding https://hinduism.stackexchange.com/questions/37343/why-having-guru-is-must-to-advance-spiritually mine is alokmahor@gmail.com – Alok Dec 10 '19 at 04:53
  • It's NOT a good idea to hard-code everything. I have an answer below. – William Hou Oct 27 '22 at 09:29
0

You can do it like this

 <label for="1">hi</label>
 <input type="radio" id="1" />

So if you click on the text or label it selects the radio button. But if you do this...

<label for="1">//</label>

and you add this to what the code I wrote just before this then if you click on the 2nd label then it will also select the radio.

0

Nesting the input tag within the label tag ensures the label appears right next to the radio button. With the earlier approaches suggested, you can put the label tag anywhere within the html file and it will select the associated radio button when clicked. Check this out:

<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>

Doing it this way instead eliminates this flaw:

<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>
Neo
  • 117
  • 2
  • 3
  • 10
  • I think the only point missing in your answer is that the reason that you can click on the label is because there is a 'for' attribute that links the input and the label together. Otherwise great answer. – Brenton Scott Sep 01 '21 at 12:41
  • It's NOT a good idea to hard-code everything. – William Hou Oct 27 '22 at 09:57
0

I have been doing this for years, but neither of these work for me, using variables.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

and here is the source:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
Gymus
  • 11
  • 4
0

The label tag should be around each answer, e.g. around Abe, Andrew, etc... and it needs to be unique for each of them.

endyourif
  • 2,186
  • 19
  • 33
-1

It's NOT a good idea to hard-code everything.

I'm using Angular.

For radio buttons or check boxes, you need to use property binding. Colors, for example:

In the .ts file:

colors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];

In the .html file, the "for" of the label and the "id" of the input should have the same value as the singular variable on the right side of ngFor expression (here it's "color"), and BOTH the "for" and the "id" need to be put inside square brackets []:

<div class="radio" *ngFor="let color of colors">
    <label [for]="color">
        <input type="radio" name="color" [id]="color" ngModel [value]="color">
        {{color}}
    </label>
</div>

Then you'll be able to select with the label.

Result: enter image description here

William Hou
  • 1,251
  • 14
  • 17