Docs HTML exécutables : Case à cocher

Q: Comment faire une case à cocher en HTML ?

Utilisez dans un label : I agree . Le label rend aussi le texte cliquable.

Q: Comment cocher une case par défaut ?

Ajoutez l'attribut checked : . C'est sa présence qui compte, donc checked="false" coche quand même la case. En JavaScript, définissez box.checked = true ou false.

Q: Comment récupérer la valeur d'une case à cocher en JavaScript ?

Lisez box.checked, qui vaut true ou false. box.value est la valeur qu'elle enverrait, et elle reste la même que la case soit cochée ou non. Écoutez l'événement change pour réagir quand elle bascule.

Q: Comment changer la couleur d'une case à cocher ?

Définissez accent-color dessus : input[type=checkbox] { accent-color: #16a34a; }. Pour une apparence entièrement personnalisée, définissez appearance: none et dessinez vous-même la case et la coche en CSS.

Comment faire une case à cocher en HTML

Une case à cocher est un <input type="checkbox">. Placez-la dans un <label> avec son texte, pour qu'un clic sur le texte la fasse aussi basculer. Cochez une ou deux cases et appuyez sur Save pour voir ce qu'envoie le formulaire :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Avec l'état par défaut, le formulaire n'envoie que updates=on. Deux règles l'expliquent :

Une case cochée envoie name=value. La seconde case n'a pas de value, elle envoie donc la valeur par défaut, on.
Une case non cochée n'envoie rien du tout. Ni newsletter=no, ni une valeur vide : le nom est absent des données.

checked dans le HTML fixe l'état de départ. Comme pour tout attribut booléen, c'est sa présence qui compte : checked="false" coche quand même la case.

Les attributs de la case à cocher

Attribut	Rôle
`name`	La clé envoyée quand la case est cochée
`value`	Ce qui est envoyé quand la case est cochée (par défaut `on`)
`checked`	Cochée au chargement de la page
`required`	Le formulaire ne sera pas envoyé tant que cette case n'est pas cochée
`disabled`	Ne peut pas basculer et n'est pas envoyée

Un groupe de cases à cocher

Pour « choisissez autant que vous voulez », donnez à chaque case le même name et une value différente. Entourez-les d'un <fieldset> avec une <legend> pour que le groupe ait un nom :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

Le formulaire envoie topic=html et topic=css : le même nom deux fois. La plupart des frameworks serveur savent lire cela comme une liste. PHP fait exception : il ne garde que la dernière valeur sauf si le nom se termine par des crochets, name="topic[]". En JavaScript, new FormData(form).getAll('topic') renvoie ['html', 'css'].

Envoyer une valeur quand la case n'est pas cochée

Quand le serveur a besoin d'un « non » explicite, placez un champ caché de même nom avant la case à cocher. Case décochée, seule la valeur cachée est envoyée ; case cochée, les deux sont envoyées et le serveur prend la dernière :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Appuyez sur Continue : le formulaire refuse tant que la case des conditions n'est pas cochée, car elle est required. Ensuite, il envoie marketing=no et terms=accepted, ou marketing=no, marketing=yes et terms=accepted si la première case est cochée. Des frameworks comme Rails génèrent exactement cette paire avec champ caché. Vérifiez comment votre serveur lit un nom répété avant de compter dessus.

Tout sélectionner et l'état indeterminate

Une case à cocher a un troisième aspect, un tiret, pour « certaines mais pas toutes ». Il n'existe qu'en JavaScript : définissez box.indeterminate = true. Une case « tout sélectionner » s'en sert quand une partie des cases qu'elle contrôle sont cochées :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate ne change que l'apparence (et ce qu'annoncent les lecteurs d'écran : « mixte » ou « partiellement cochée »). En dessous, la case reste cochée ou non cochée, et c'est ce qu'envoie le formulaire. Cliquer sur une case indeterminate efface le tiret et la fait basculer.

Utilisez l'événement change pour réagir à une case à cocher, et lisez box.checked pour son état. box.value ne change pas quand la case bascule.

Styliser les cases à cocher

Le changement le plus rapide est accent-color, qui recolore la case native en gardant tout son comportement. Pour une apparence complètement différente, appearance: none supprime le dessin natif et vous laisse styliser l'input comme n'importe quelle boîte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

La case personnalisée reste une vraie case à cocher : elle bascule au clic et avec Espace, elle est envoyée avec le formulaire et elle est annoncée comme une case à cocher. Dessinez-la avec :checked et gardez un style :focus-visible, car sans le dessin natif il n'y a aucun anneau de focus que vous n'ayez pas ajouté vous-même.

Un interrupteur

Un interrupteur est une case à cocher qui signifie « activé ou désactivé maintenant » plutôt que « inclure ceci ». Dessinez-le avec appearance: none et ajoutez role="switch" pour que les lecteurs d'écran annoncent un interrupteur activé ou désactivé au lieu d'une case cochée :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start place le bouton à partir du début de la ligne, donc l'interrupteur glisse dans l'autre sens sur les pages de droite à gauche, comme il se doit. Pour des choix oui ou non groupés où un seul peut être choisi, voir bouton radio HTML.

Erreurs fréquentes

Attendre false pour une case non cochée. Rien n'est envoyé. Traitez un nom absent comme « désactivé » sur le serveur, ou ajoutez le champ caché.
checked="false". Cela coche quand même la case. Retirez l'attribut.
Une case à cocher sans label, ou avec à côté un texte qui n'est pas un <label>. La petite case devient la seule cible cliquable et les lecteurs d'écran annoncent « case à cocher » sans nom. Voir label HTML.
Oublier value, si bien que chaque case d'un groupe envoie on et que le serveur ne peut pas les distinguer.
Lire box.value pour savoir si la case est cochée. Utilisez box.checked.
Des cases à cocher pour « choisissez-en un ». C'est le rôle des boutons radio.

Questions fréquentes

Comment faire une case à cocher en HTML ?

Utilisez <input type="checkbox"> dans un label : <label><input type="checkbox" name="terms" value="yes"> I agree</label>. Le label rend aussi le texte cliquable.

Comment cocher une case par défaut ?

Ajoutez l'attribut checked : <input type="checkbox" name="news" checked>. C'est sa présence qui compte, donc checked="false" coche quand même la case. En JavaScript, définissez box.checked = true ou false.

Quelle valeur envoie une case à cocher non cochée ?

Aucune. Une case non cochée est complètement omise des données envoyées. Une case cochée envoie sa value, ou on si elle n'a pas de value. Si le serveur a besoin d'un « non » explicite, placez un champ caché de même nom avant la case.

Comment récupérer la valeur d'une case à cocher en JavaScript ?

Lisez box.checked, qui vaut true ou false. box.value est la valeur qu'elle enverrait, et elle reste la même que la case soit cochée ou non. Écoutez l'événement change pour réagir quand elle bascule.

Comment changer la couleur d'une case à cocher ?

Définissez accent-color dessus : input[type=checkbox] { accent-color: #16a34a; }. Pour une apparence entièrement personnalisée, définissez appearance: none et dessinez vous-même la case et la coche en CSS.

Concepts liés