单击文本以选择相应的单选按钮

小开

最佳答案

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.

小开

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

小开

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>

小开

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.

小开

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>

小开

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

小开

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: