Cliquer sur le texte pour sélectionner le bouton radio correspondant

Question 1

Je crée une application Web de quiz en utilisant PHP. Chaque question est composée d'une question distincte <label>et a 4 choix possibles, en utilisant radio buttonspour permettre à l'utilisateur de sélectionner sa / sa réponse. Le code HTML actuel pour une seule question ressemble à ceci:

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

Je souhaite que l'utilisateur ait la possibilité de cliquer sur le texte associé au bouton radio. À l'heure actuelle, l'utilisateur ne peut cliquer que sur le bouton radio lui-même - ce que je trouve être une tâche assez lourde.

J'ai lu Impossible de sélectionner un choix de bouton radio particulier en cliquant sur le texte du choix et la suggestion indique que les attributs foret iddes balises correspondent. J'ai fait cela et cela ne fonctionne toujours pas.

Ma question est la suivante: j'aimerais pouvoir cliquer sur le texte d'un <input type="radio">objet, par opposition à ne pouvoir sélectionner que le bouton radio lui-même. Je sais que j'ai déjà lu à ce sujet mais je n'arrive pas à trouver de solution à mon problème. Toute aide ou suggestion est très appréciée!

Question 2

Dans votre code, vous avez une étiquette sur le formulaire lui-même. Vous souhaitez mettre des étiquettes sur chaque groupe radio individuel, comme indiqué ci-dessous.

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

Développer l'extrait

Vous devez garder à l'esprit que deux éléments ne doivent jamais avoir le même identifiant. L' nameattribut est utilisé pour que les boutons radio fonctionnent comme un groupe et n'autorisent qu'une seule sélection à la fois.

Question 3

Il semble y avoir un petit espace non cliquable entre le bouton radio et l 'étiquette si cela est fait selon la réponse de Nathan . Voici comment les faire rejoindre de manière transparente (voir cet 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>

Question 4

La balise d'étiquette doit être autour de chaque réponse, par exemple autour d'Abe, Andrew, etc ... et elle doit être unique pour chacune d'elles.

Question 5

L'imbrication de la balise d'entrée dans la balise d'étiquette garantit que l'étiquette apparaît juste à côté du bouton radio. Avec les approches précédentes suggérées, vous pouvez placer la balise d'étiquette n'importe où dans le fichier html et il sélectionnera le bouton radio associé lorsque vous cliquez dessus. Regarde ça:

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

Développer l'extrait

Faire de cette façon élimine à la place cette faille:

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

Développer l'extrait

Question 6

Tu peux le faire comme ça

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

Donc, si vous cliquez sur le texte ou l'étiquette, il sélectionne le bouton radio. Mais si vous faites cela ...

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

et vous ajoutez ceci à ce que le code que j'ai écrit juste avant cela, puis si vous cliquez sur la 2ème étiquette, il sélectionnera également la radio.

Question 7

Je fais cela depuis des années, mais ni l'un ni l'autre ne fonctionne pour moi, en utilisant des 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";

et voici la source:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />