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!
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>la source
<input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(pas d'espaces ni de retours à la ligne entre les balises)margin: 3px 3px 0 5px;(c'est plus visible dans Firefox car il y a un effet de survol par défaut) qui peut être corrigé avec CSS en supprimant la marge et en la remplaçant par un padding.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.
la source
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>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>la source
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.
la source
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 />la source