Best IT Recipes

By clicking on the text, select the appropriate radio button

I am creating a web quiz application using PHP. Each question consists of a separate <label> and has 4 possible options using radio buttons so that the user can select his answer. The current HTML for one question looks like this:

 <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 be able to click on the text associated with the radio button. . Right now, the user can only click on the switch itself - which I consider a rather cumbersome task.

I read. It is not possible to select a specific selection of the radio button by clicking on the selection text , and the prompts indicate the creation of the for and id attributes matching labels. I did this and it still does not work.

My question: I would like to be able to click on the text of the <input type="radio"> object, and not just select the switch itself. I know that I read about this earlier, but cannot find a solution to my problem. Any help or suggestions are greatly appreciated!

+75
html input css radio-button forms
Oct 22 '11 at 23:17
source share
6 answers

In your code, you have a shortcut in the form itself. You want to place tags in each individual group of radio stations, 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 identifier. The name attribute is used so that the radio buttons function as a group and allow only one selection at a time.

+151
Oct 22 '11 at 23:23
source share

There seems to be a little free space between the switch and the shortcut if this is done in accordance with Nathan's answer. Here's how to make them seamlessly connect (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>
+32
Dec 14 '15 at 12:27
source share

The tag tag should be around each answer, for example. around Abe, Andrew, etc., and this should be unique to each of them.

+1
Oct 22 '11 at 23:24
source share

Inserting an input tag inside a tag tag ensures that the tag is displayed next to the radio button. With earlier approaches, you can place the tag tag anywhere in the html file and it will select the associated radio button when clicked. Check this:

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

Running this method instead eliminates this drawback:

 <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>
+1
Oct 14 '17 at 13:52 on
source share

You can do it like this:

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

So, if you click on a text or label, select the radio button. But if you do this ...

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

and you add this to the code that I wrote before, then if you click on the second label, then it will also select the radio.

0
Oct 10 '16 at 1:19
source share

I have been doing this for years, but none of them worked 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 />
0
Jan 25 '19 at 18:59
source share


More articles:


All Articles