Question Comment créer une case à cocher HTML avec une étiquette cliquable


Comment puis-je créer une case à cocher HTML avec une étiquette qui est cliquable (cela signifie que cliquer sur l'étiquette active / désactive la case à cocher)?


834
2018-06-09 13:33


origine


Réponses:


Méthode 1: balise d'étiquette Wrap

Envelopper la case à cocher dans un label marque:

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

Méthode 2: utilisez le for Attribut

Utilisez le for attribut (cocher la case id):

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

REMARQUE: L'identifiant doit être unique sur la page!

Explication

Puisque les autres réponses ne le mentionnent pas, une étiquette peut inclure jusqu'à 1 entrée et omettre for attribut, et il sera supposé que c'est pour l'entrée à l'intérieur.

Extrait w3.org (avec mon accent):

[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 la même que la valeur de l'attribut id d'un autre contrôle dans le même document. En l'absence, 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 dans le contenu de l'élément LABEL. Dans ce cas, l'étiquette peut contenir uniquement 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'assigner un id à chaque case à cocher (génial!).

  • 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, donc il n'y a pas deux endroits séparés à cliquer qui peuvent contrôler la case à cocher - un seul, peu importe la distance <input> et le texte d'étiquette réel sont, et peu importe le type de CSS que vous lui appliquez.

Démo avec quelques 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>


1594
2018-06-09 13:36



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>

46
2018-06-09 13:35



Vous pouvez également utiliser des pseudo-éléments CSS pour sélectionner et afficher vos étiquettes de tous les attributs de valeur de votre case à cocher (respectivement).
Modifier: Cela fonctionnera uniquement avec les navigateurs webkit et blink (Chrome (ium), Safari, Opera ....) et donc la plupart des navigateurs mobiles. Non Firefox ou support IE ici.
Cela peut être utile uniquement lors de l'intégration de 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émonstrationhttp://codepen.io/mrmoje/pen/oteLl, + L'essentiel de celui-ci


11
2018-01-29 17:07



<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

7
2018-06-09 13:36



<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

3
2018-06-09 13:36



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
2017-07-06 10:47



Cela devrait vous aider: W3Schools - Étiquettes

<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
2018-06-09 13:44



<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

1
2018-06-09 13:37