Activez le bouton radio HTML en cliquant sur son étiquette

87

Existe-t-il s'il vous plaît un moyen simple de faire basculer un bouton radio - lorsqu'un texte près de lui est cliqué - sans introduire de gros framework Javascript dans mon petit projet PHP?

Le formulaire Web ressemble à ceci:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>
javascript html radio-button Alexander Farber
la source

Réponses:

164

Vous pouvez également envelopper vos éléments sans leur donner à chacun un ID, car a <label>est implicitement pour l'entrée qu'il contient, comme ceci:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>
Nick Craver
la source
4
Cela rend le style de l'étiquette plus difficile et vous oblige à envelopper votre texte avec encore plus d'éléments.
Soviut
2
Oui, mais si vous ne stylisez pas, il est plus facile d'obtenir les fonctionnalités que vous souhaitez. Je n'aime pas avoir à ajouter des identifiants supplémentaires et des attributs «pour».
Dr C. Hilarius
4
Les identifiants +1 peuvent être très mauvais, il vaut donc mieux les éviter en règle générale
Chris Stephens
l'emballage est une solution supérieure à l'utilisation idet forsans emballage. La raison en est que si l'étiquette a une large marge et que l'utilisateur clique dans la zone idéale entre la case à cocher et l'étiquette (comme il est le plus susceptible de le faire), rien ne se passe. Fiddle ici: jsfiddle.net/v157ctja/5
Marcus Junius Brutus
72

Vous pouvez utiliser des <label>éléments conçus pour faire exactement cela:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
Frédéric Hamidi
la source
1
@Alexander, absolument. Seule la version 2 et inférieure de Safari ne le prend pas en charge.
Frédéric Hamidi
3
Et par la suite, vous pouvez utiliser le sélecteur input#radCreateMode:checked ~ labelpour appliquer des styles à l'étiquette. L'application de styles aux étiquettes lors de la sélection n'est pas possible si nous imbriquons l'entrée dans l'étiquette.
Zuhaib Ali le
1
Cela devrait vraiment être la réponse acceptée, c'est la bonne façon de le faire.
greco.roamin
1
J'utilise Safari v 13 et cette méthode n'a pas fonctionné pour moi. Le bouton radio peut être désélectionné, mais pas sélectionné. J'ai dû enrouler l'étiquette autour de l'entrée: <label> <input> mon texte d'étiquette </label>. Notez que je n'utilise pas de <form>, ni de <fieldset>.
IAM_AL_X
Assurez-vous que la valeur de l'attribut for est l'ID correct pour l'entrée. Juste au cas où quelqu'un aurait fait la même erreur que moi.
Kevin .NET
5

L'emballage de l'entrée sous l'étiquette devrait fonctionner.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>
Jason Ching
la source
1

J'ai eu du mal à trouver la valeur du bouton radio en utilisant cette méthode, une alternative consiste à utiliser une zone de frappe augmentant la zone cliquable d'un bouton .

Christopher Grigg
la source