web-dev-qa-db-fra.com

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

Je crée une application Web de quiz avec PHP. Chaque question est composée d'un <label> séparé et comporte 4 choix possibles, en utilisant radio buttons pour permettre à l'utilisateur de sélectionner 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 voudrais que l'utilisateur puisse avoir la possibilité de cliquer sur le bouton radio associé au texte. À l’heure actuelle, l’utilisateur ne peut que cliquer sur le bouton radio lui-même - ce qui me semble ê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 suggère de faire correspondre les attributs for et id des balises. J'ai fait ça et ça ne marche toujours pas. 

Ma question est la suivante: J'aimerais pouvoir cliquer sur le texte d'un objet <input type="radio">, au lieu de pouvoir uniquement sélectionner 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!

htmlcssformsinputradio-button
75
Abundnce10

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>

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

154
Nathan

Il semble y avoir un peu d'espace non-cliquable entre le bouton radio et l'étiquette si cela est fait conformément à la réponse de Nathan. Voici comment les faire adhérer 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>
32
user21820

L'imbrication de l'étiquette d'entrée dans l'é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 label n'importe où dans le fichier HTML et sélectionner 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>

Le faire de cette façon élimine plutôt 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>

1
Neo

L'étiquette doit être placée autour de chaque réponse, par exemple. autour de Abe, Andrew, etc ... et il doit être unique pour chacun d’eux.

1
endyourif

Je fais cela depuis des années, mais aucune de ces méthodes 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 />
0
Gymus

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, le bouton radio sélectionné est sélectionné . Mais si vous le faites ...

<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 deuxième étiquette, la radio sera également sélectionnée.

0
Samuel Chen