Cases à cocher HTML : valeurs multiples, required et indeterminate

HTML <input type="checkbox"> permet à chaque option d'être sélectionnée ou décochée indépendamment. Seules les cases cochées soumettent leur nom et leur valeur ; une option non cochée est omise des données soumises plutôt qu'envoyée comme fausse ou comme chaîne vide.

Lire plusieurs valeurs portant le même nom

Contrairement aux boutons radio, les cases à cocher avec le même name peuvent être sélectionnées ensemble. Leurs valeurs se répètent sous un même nom, donc lisez-les toutes. Utilisez getAll sur une instance JavaScript FormData, et vérifiez les règles de votre framework serveur pour la gestion de valeurs multiples.

name identifie le champ ; value est ce qu'il envoie lorsqu'il est sélectionné. Omettre la valeur utilise la chaîne par défaut on, donc spécifiez des valeurs pour distinguer les options. Donnez à chaque case à cocher un id unique pour son label.

Exemple complet : sélection multiple, cases requises et entrées exclues

Enregistrez ce code sous checkbox-demo.html et ouvrez-le dans un navigateur. Il affiche les entrées du formulaire réelles au lieu de les envoyer à un serveur. Comparez comment une option désactivée est exclue même si elle est cochée.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Valeurs envoyées par les cases</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>Exercice de cases à cocher</h1>
  <form id="demo">
    <fieldset>
      <legend>Couleurs souhaitées (choix multiples)</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">Bleu</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">Rouge</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">Vert (désactivé)</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">Prêt pour l’exercice (obligatoire)</label>
    </p>
    <button type="submit">Afficher les valeurs</button>
    <button type="reset">Réinitialiser</button>
    <button type="button" id="partial">Afficher Bleu comme partiellement sélectionné</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>

1. Soumettez sans sélectionner la case de préparation : la validation requise bloque la soumission.
2. Sélectionnez préparation et Rouge, puis soumettez. La sortie contient color=blue, color=red, et ready=yes ; le Vert désactivé est exclu.
3. Décochez Bleu et Rouge puis envoyez de nouveau. Les entrées color sont absentes ; seul ready=yes reste.
4. La réinitialisation restaure Bleu et Vert cochés, tandis que Rouge et préparation reviennent décochés.

Distinguer coché, obligatoire et indéterminé

L'attribut checked donne la sélection initiale. Lisez l'état actuel en utilisant la propriété checked en JavaScript. checked="false" a toujours l'attribut présent ; omettez-le pour une case initialement décochée. La réinitialisation restaure les valeurs initiales au lieu de vider chaque case.

Une case à cocher avec required doit elle-même être cochée. Cela ne signifie pas qu'une seule case partageant le même nom suffit. Une condition « au moins une de celles-ci » nécessite une validation et des instructions séparées.

indeterminate est une propriété JavaScript qui affiche un état de sélection partielle. Elle n'est pas définie via un attribut HTML et est indépendante de checked, qui détermine la soumission. Après réinitialisation, appuyez sur le bouton d'affichage partiel, sélectionnez la case de préparation requise et inspectez les valeurs : le bleu est toujours soumis. L'affichage partiel ne supprime pas checked et ne crée pas de troisième valeur soumise.

Gérer les valeurs manquantes et multiples sur le serveur

Traiter chaque option décochée manquante comme une erreur, ou ne lire que la dernière valeur d'un nom répété, peut modifier la signification prévue. Distinguez « rien de sélectionné » d'une requête invalide en utilisant les règles de votre application, et validez les valeurs autorisées sur le serveur.

PHP peut recevoir name="color[]" comme un tableau, mais cela suit les règles du parseur du serveur. Un navigateur n'envoie pas un objet tableau universel pour chaque langage de programmation. Vérifiez que la valeur reçue est un tableau, et gérez les valeurs manquantes, les tableaux imbriqués et les valeurs interdites. Consultez la documentation PHP sur les variables externes pour les règles d'analyse et la référence MDN des cases à cocher pour le comportement des cases à cocher.