web-dev-qa-db-fra.com

Comment créer une case à cocher avec une étiquette cliquable?

Comment créer une case à cocher HTML avec une étiquette sur laquelle on peut cliquer (cela signifie que cliquer sur l'étiquette active/désactive la case à cocher)?

htmlcheckboxclicklabel
956
laurent

Méthode 1: Wrap Label Tag

Enroulez la case dans une balise label:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Méthode 2: Utiliser l'attribut for

Utilisez l'attribut for (correspond à la case à cocher id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

NOTE: l'ID doit être unique sur la page!

Explication

Comme les autres réponses ne le mentionnent pas, une étiquette peut inclure jusqu'à 1 entrée et omettre l'attribut for. On supposera que c'est pour l'entrée en elle.

Extrait de w3.org (avec mes italiques):

[L'attribut for] associe explicitement l'étiquette en cours de définition à un autre contrôle. Lorsqu'il est présent, la valeur de cet attribut doit être identique à la valeur de l'attribut id d'un autre contrôle du même document. Lorsqu'il est absent, l'étiquette en cours de définition est associée au contenu de l'élément.

Pour associer implicitement une étiquette à un autre contrôle, , l'élément de contrôle doit être contenu dans le contenu de l'élément LABEL . Dans ce cas, le LABEL ne peut contenir que un élément de contrôle . L'étiquette elle-même peut être positionnée avant ou après le contrôle associé.

L'utilisation de cette méthode présente certains avantages par rapport à for:

  • Pas besoin d'attribuer un id à chaque case à cocher (super!).

  • Pas besoin d'utiliser l'attribut supplémentaire dans le <label>.

  • La zone cliquable de l'entrée est également la zone cliquable de l'étiquette. Par conséquent, il n'y a pas deux endroits distincts sur lesquels cliquer qui peuvent contrôler la case à cocher: un seul, quelle que soit la distance entre <input> et le texte de l'étiquette, et peu importe. quel type de CSS vous appliquez.

Démo avec du CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>
1803
Wesley Murch

Assurez-vous simplement que l'étiquette est associée à l'entrée.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>
50
Quentin

Vous pouvez également utiliser des pseudo-éléments CSS pour sélectionner et afficher vos étiquettes parmi tous les attributs de valeur de votre case à cocher (respectivement).
Edit: Ceci fonctionnera uniquement avec les navigateurs Webkit et Blink (Chrome (ium), Safari, Opera ....) et donc la plupart des navigateurs mobiles. Non Firefox ou IE supporte ici.
Cela ne peut être utile que si vous intégrez Webkit/Blink dans vos applications.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Toutes les étiquettes de pseudo-éléments seront cliquables.

Démo: http://codepen.io/mrmoje/pen/oteLl , + l'essentiel

12
moje
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
7
Dave Kiss
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
3
ShaneBlake

Cela fonctionne aussi:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
3
Mystral

Cela devrait vous aider: W3Schools - Labels

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
2
John
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
1
Christopher Armstrong

Utilisez l'élément label et l'attribut for pour l'associer à la case à cocher:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

0
James Allardice