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!

Phosphoprotein

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.

Mail

Excellently simple. Love it when an almost hidden feature of tags is re-discovered – Ajar

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>

Aluminiferous

I prefer this answer. But are you sure you even need the "for" attributes with this approach? – Syphon

@Piddu: I think you're right, so I've updated my answer. Thanks! – Aluminiferous

Another option to avoid the extra space between the radio button and label, is to simply not put it there <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label> (no spaces or newlines between the tags) – Underglaze

@AryeDovEidelman: Your solution does not work for Firefox, whereas mine does. =) – Aluminiferous

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. 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. – Underglaze

@AryeDovEidelman: I see, thanks for investigating! Though for simplicity I will stick to encasing the whole thing in the label. =) – Aluminiferous

please give me your email address or any other contact regarding hinduism.stackexchange.com/questions/37343/… mine is [email protected] – Crumpled

Answer 3

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

Preiser

Answer 4

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

Cotswolds

Answer 5

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.

Whisk

Answer 6

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>

Donica

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. – Idelia

Answer 7

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:

Pucida

The question was asked about PHP and HTML, so answers specific to angular are off-topic. The appropriate answer, to use basic HTML syntax to "for" and "id", is not hard coding, and adding hard-coded labels to radio button forms is the standard. It's an opinion whether hard-coded labels are appropriate, but that opinion is off topic to this question because regardless of hard-coding the labels provides a small, reproducible sample that answers the question in the shortest possible way without regards to for-loops. – Lamppost

No. It doesn't matter it's PHP, HTML, Angular, React, or Stencil, hard-code is never the first choice. I pointed out the flaw of the solutions above. If some people don't like it, so be it. – Pucida