En cliquant sur le texte pour sélectionner le bouton radio correspondant

Question

Je suis de la création d'un quiz application web à l'aide de PHP. Chaque question est composé d'un distinct <label> et a 4 choix possibles, à l'aide de radio buttons afin de permettre à l'utilisateur de choisir sa réponse. Le HTML en cours pour une seule question ressemble:

<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 voudrais à l'utilisateur d' avoir la possibilité de cliquer sur le texte associé à un bouton radio. Droit maintenant, l'utilisateur peut cliquer sur le bouton radio à lui-même -, que je trouve être une très lourde tâche.

J'ai lu pas en mesure de sélectionner un bouton radio choix en cliquant sur le choix du texte et de la suggestion des points en vue de rendre l' for et id attributs des balises match. Je l'ai fait et ça ne fonctionne toujours pas.

Ma question est: je voudrais être en mesure de cliquer sur le texte d'un <input type="radio"> de l'objet, plutôt que d'être en mesure de sélectionner le bouton radio elle-même. Je sais que je l'ai lu à ce sujet avant, mais n'arrive pas à trouver de solution à mon problème. Toute aide ou suggestions sont appréciés!

Answer 1

Dans votre code, vous avez une étiquette sur le formulaire lui-même. Vous souhaitez mettre des étiquettes sur chaque groupe de radio, 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>
 

Exemple en direct ici.

N'oubliez pas que deux éléments ne doivent jamais avoir le même identifiant. L'attribut name est utilisé pour que les boutons radio fonctionnent en tant que groupe et n'autorisent qu'une sélection à la fois.

Answer 2

L'étiquette doit se trouver autour de chaque réponse, par exemple Abe, Andrew, etc., et doit être unique pour chacune d'entre elles.