<input type="checkbox">

Une chaîne de caractères qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :

<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">Subscribe</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).

En plus des attributs qui sont partagés par l'ensemble des éléments <input>, les champs de type checkbox prennent aussi en charge les attributs suivants :

checked

Un attribut booléen qui indique si la case est cochée par défaut à l'ouverture de la page. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL checked de l'objet 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 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)

Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.

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 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 par exemple).

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>

Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément <label> associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).

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.

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;

Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.

Il n'y a pas beaucoup de cas d'usage pour cette propriété. Le scénario le plus fréquent est d'avoir une case à cocher parente, contenant plusieurs options filles représentées par d'autres cases à cocher. Si l'ensemble des options filles est coché, la case à cocher parente est cochée, si toutes les options filles sont décochées, la case à cocher parente est décochée. En revanche, si au moins une des options filles est dans un état différent des autres, la case à cocher parente apparaît dans un état indéterminé.

Voici un exemple d'utilisation de cet état (tiré de CSS Tricks) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire 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;
  }
}

Les cases à cocher prennent en charge la validation (comme d'autres <input>). Toutefois, la plupart des propriétés de l'instance correspondante ValidityState vaudront toujours false. Si la case à cocher utilise l'attribut required, mais n'est pas cochée, ValidityState.valueMissing vaudra true.

Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.

• 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
• Tableau de compatibilité des propriétés CSS pour les contrôles de formulaires