<input type="checkbox">

Exemple interactif

<fieldset>
  <legend>Choisissez les caractéristiques de votre monstre&nbsp;:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Écailles</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Cornes</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Valeur

Une chaîne de caractères représentant la valeur de la case à cocher. Celle-ci n'est pas affichée côté client, mais côté serveur, c'est la value donnée aux données envoyées avec le name de la case à cocher. Prenez l'exemple suivant :

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">
      Souhaitez-vous vous abonner à la newsletter ?
    </label>
  </div>
  <div>
    <button type="submit">S'abonner</button>
  </div>
</form>

Dans cet exemple, on a le nom (l'attribut name) subscribe utilisé pour la case à cocher avec une valeur (l'attribut value) qui est newsletter. Lorsque le formulaire est envoyé, les données seront transmises sous la forme subscribe=newsletter.

Si l'attribut value n'était pas renseigné, la valeur par défaut serait on (dans l'exemple, les données envoyées au serveur auraient eu la forme subscribe=on).

Attributs supplémentaires

En plus des attributs communs partagés par tous les éléments <input>, les champs de type checkbox prennent en charge les attributs suivants.

checked

Un attribut booléen qui indique si cette case à cocher est cochée par défaut (lorsque la page se charge). Il n'indique pas si cette case à cocher est actuellement cochée : si l'état de la case à cocher est modifié, cet attribut de contenu ne reflète pas la modification. (Seul l'attribut IDL checked de l'interface HTMLInputElement est mis à jour.)

Note : À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut value qui est envoyé (ou la valeur on si aucun attribut value n'est présent). À la différence des autres navigateurs, Firefox conserve l'état coché placé dynamiquement ^(angl.) d'un champ <input> après les rechargements de la page. L'attribut autocomplete peut être utilisé afin de contrôler cette fonctionnalité.

value

L'attribut value est partagé par l'ensemble des éléments <input> ; mais il a un rôle spécifique pour les champs de type checkbox : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut value qui est envoyée. Si l'attribut value n'est pas renseigné, ce sera la chaîne de caractères "on" qui sera envoyée par défaut (voir la section précédente)

Utiliser les cases à cocher

Nous avons déjà couvert l'utilisation la plus basique des cases à cocher ci-dessus. Voyons maintenant les autres fonctionnalités et techniques courantes liées aux cases à cocher dont vous aurez besoin.

Gérer plusieurs cases à cocher

L'exemple que nous avons vu ci-dessus ne contenait qu'une seule case à cocher ; dans des situations réelles, vous rencontrerez probablement plusieurs cases à cocher. Si elles sont complètement indépendantes, vous pouvez simplement les gérer séparément, comme montré ci-dessus. Cependant, si elles sont toutes liées, les choses ne sont pas aussi simples.

Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérêts d'une personne (voir l'exemple complet dans la section d'exemples).

<fieldset>
  <legend>Veuillez sélectionner vos intérêts</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Développement</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musique</label>
  </div>
</fieldset>

Dans cet exemple on voit que chaque case à cocher utilise le même attribut name. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : interest=coding&interest=music. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélectionnées (voir la question StackOverflow : Gérer plusieurs cases à cocher avec une seule variable côté serveur ^(angl.) par exemple).

Cocher certaines cases par défaut

Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen checked. Voir l'exemple qui suit :

<fieldset>
  <legend>Veuillez sélectionner vos intérêts</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Développement</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musique</label>
  </div>
</fieldset>

Fournir une zone cliquable plus grande pour vos cases à cocher

Dans les exemples ci-dessus, vous avez peut-être remarqué que vous pouvez basculer une case à cocher en cliquant sur son élément <label> associé ainsi que sur la case elle-même. Il s'agit d'une fonctionnalité très utile des étiquettes de formulaire HTML qui facilite le clic sur l'option souhaitée, en particulier sur les appareils à petit écran comme les smartphones.

En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <label> dans vos formulaires.

Gérer un état indéterminé

Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminée. Cet état peut être obtenu via la propriété indeterminate d'un élément HTMLInputElement en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :

inputInstance.indeterminate = true;

Lorsque indeterminate vaut true, la case à cocher affiche une ligne horizontale dans la boîte (cela ressemble à un trait d'union ou un signe moins) au lieu d'une coche dans la plupart des navigateurs.

Il n'y a pas beaucoup de cas d'usage pour cette propriété. Le plus courant est lorsqu'une case à cocher est disponible et « possède » un certain nombre de sous-options (qui sont aussi des cases à cocher). Si toutes les sous-options sont cochées, la case à cocher principale est aussi cochée, et si elles sont toutes décochées, la case à cocher principale est décochée. Si une ou plusieurs des sous-options ont un état différent des autres, la case à cocher principale est dans l'état indéterminé.

Cela peut être observé dans l'exemple ci-dessous (merci à CSS Tricks ^(angl.) pour l'inspiration). Dans cet exemple, on tient le compte des ingrédients que l'on collecte pour une recette. Lorsque vous cochez ou décochez une case d'ingrédient, une fonction JavaScript vérifie le nombre total d'ingrédients cochés :

• Si aucun n'est coché, la case associée à la recette est décochée.
• Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.
• Si les trois ingrédients sont cochés, la case associée à la recette est cochée.

Dans cet exemple, l'état indeterminate est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

<form>
  <fieldset>
    <legend>Complétez la recette</legend>
    <div>
      <input type="checkbox" id="enchantment" name="enchantment" />
      <label for="enchantment">Table d'enchantement</label>
      <ul>
        <li>
          <input type="checkbox" id="book" name="ingredient" value="book" />
          <label for="book">Livre</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="diamonds"
            name="ingredient"
            value="diamonds" />
          <label for="diamonds">Diamants (x2)</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="obsidian"
            name="ingredient"
            value="obsidian" />
          <label for="obsidian">Bloc d'obsidienne (x4)</label>
        </li>
      </ul>
    </div>
  </fieldset>
</form>

Validation

Les cases à cocher prennent en charge la validation (comme tous les éléments <input>). Toutefois, la plupart des propriétés de ValidityState valent toujours false. Si la case à cocher utilise l'attribut required mais n'est pas cochée, alors ValidityState.valueMissing vaut true.

Exemples

L'exemple suivant est une version étendue de l'exemple « plusieurs cases à cocher » vu ci-dessus — il propose plus d'options standards, ainsi qu'une case « autre » qui, lorsqu'elle est cochée, fait apparaître un champ texte pour saisir une valeur pour l'option « autre ». Ceci est réalisé avec un court bloc JavaScript. L'exemple inclut des étiquettes implicites, avec l'élément <input> directement à l'intérieur du <label>. Le champ texte, sans étiquette visible, inclut l'attribut aria-label qui fournit son nom accessible. Cet exemple inclut aussi du CSS pour améliorer la mise en forme.

HTML

<form>
  <fieldset>
    <legend>Veuillez sélectionner vos intérêts</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        Développement
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        Musique
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        Art
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        Sports
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        Cuisine
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        Autre
      </label>
      <input
        type="text"
        id="otherValue"
        name="other"
        aria-label="Autres intérêts" />
    </div>
    <div>
      <button type="submit">Envoyer le formulaire</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les sélecteurs CSS qui permettent de mettre en forme les cases à cocher en fonction de leur état actuel : :checked, :indeterminate
• L'interface du DOM qui représente cet élément : HTMLInputElement