63 votes

L'étiquette ne fonctionne pas avec la case à cocher

OK, qu'est-ce qui me manque ? J'ai :

<form>
    <input type="checkbox" name="showRatings" value="1" checked>
    <label for="showRatings">Show Ratings</label>
</form>

Et lorsque je clique sur le texte "Afficher les notations", la case à cocher ne bascule pas. Je sais que c'est quelque chose de simple.

0 votes

@Phillip La norme HTML définit comment le for l'attribut fonctionne. Au cas où vous ne l'auriez pas remarqué, mon premier commentaire ci-dessus est un lien vers le paragraphe exact de la norme où l'attribut for est défini.

0 votes

Oh, ok. Merci. C'est une belle vue du blog que vous avez faite.

126voto

David Points 65209

Je crois que le label est lié à l'élément id et non l'attribut name l'attribut. Essayez ceci :

<form>
  <input type="checkbox" name="showRatings" id="showRatings" value="1" checked>
  <label for="showRatings">Show Ratings</label>
</form>

Référence aquí .

5 votes

Oh, bon sang ! C'est ça ! Merci David !

0 votes

J'ai eu ce problème, on dirait que la section étiquette doit être après la section entrée

52 votes

L'étiquette n'a pas besoin d'être après ou avant, cela n'a vraiment aucune importance. Mais ce qui importe (et qui m'a laissé perplexe pendant un certain temps), c'est que vous devez vérifier deux fois qu'il n'y a pas de doublons d'identifiants ou d'étiquettes. Il pourrait y en avoir un généré ou placé accidentellement quelque part. Ouvrez donc l'inspecteur Chrome et effectuez une recherche rapide pour vous en assurer.

20voto

prashantsahni Points 344

Lorsque l'élément d'entrée se trouve à l'intérieur de l'étiquette, nous n'avons pas besoin de l'identifiant de l'élément ni de l'attribut "for" de l'étiquette, mais nous en avons besoin lorsqu'il se trouve à l'extérieur.

<label>
    Foo
    <input name="foo" type="checkbox" />
</label>

En cliquant sur "Foo", la case à cocher sera basculée.

0 votes

Cela fonctionnera même sans l'attribut 'name'/'id' pour l'entrée, c'est-à-dire une case à cocher que vous ne voulez pas inclure dans le formulaire.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X