Définition et utilisation de l'attribut checked
LES BALISES HTMLL'attribut checked est un attribut booléen essentiel dans les formulaires HTML qui permet de définir l'état de sélection par défaut des éléments de type checkbox et radio.
Lorsque l'attribut checked est présent dans le code HTML, il indique au navigateur qu'un élément <input> doit être automatiquement coché au moment du chargement de la page. Cet attribut définit uniquement l'état initial : l'utilisateur conserve la possibilité de modifier cette sélection à tout moment.
L'utilisation de l'attribut checked est strictement limitée à deux types d'inputs : <input type="checkbox"> pour les sélections multiples et <input type="radio"> pour les choix uniques dans un groupe. Il reste sans effet sur tous les autres types d'éléments input (text, email, password, etc.).
Grâce au JavaScript moderne, l'attribut checked peut être manipulé dynamiquement après le chargement de la page, offrant ainsi la possibilité de créer des interfaces utilisateur interactives et réactives qui s'adaptent au comportement de l'utilisateur.
Syntaxe HTML de l'attribut checked
<input type="checkbox" checked>
<input type="radio" checked="checked">
<input type="checkbox" checked="">
Exemple pratique : Formulaire de préférences utilisateur avec éléments pré-sélectionnés
Cet exemple illustre comment utiliser l'attribut checked dans un formulaire réel avec des checkboxes pour une sélection multiple et des boutons radio pour un choix unique. Les éléments marqués comme "pré-sélectionnés" correspondent aux options les plus couramment choisies.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire avec attribut checked</title>
</head>
<body>
<h1>Formulaire de préférences</h1>
<form action="traitement.php" method="post">
<fieldset>
<legend>Moyens de transport (sélection multiple)</legend>
<label>
<input type="checkbox" id="bike" name="transport[]" value="bike">
Vélo
</label><br>
<label>
<input type="checkbox" id="car" name="transport[]" value="car" checked>
Voiture (pré-sélectionnée)
</label><br>
<label>
<input type="checkbox" id="bus" name="transport[]" value="bus">
Transport en commun
</label><br>
<label>
<input type="checkbox" id="walk" name="transport[]" value="walk" checked>
Marche à pied (pré-sélectionnée)
</label><br>
</fieldset>
<fieldset>
<legend>Niveau d'expérience (sélection unique)</legend>
<label>
<input type="radio" id="beginner" name="level" value="beginner">
Débutant
</label><br>
<label>
<input type="radio" id="intermediate" name="level" value="intermediate" checked>
Intermédiaire (pré-sélectionné)
</label><br>
<label>
<input type="radio" id="advanced" name="level" value="advanced">
Avancé
</label><br>
</fieldset>
<button type="submit">Valider les préférences</button>
</form>
</body>
</html>
Compatibilité navigateurs de l'attribut checked
L'attribut checked bénéficie d'une compatibilité universelle avec l'ensemble des navigateurs web, qu'ils soient modernes ou anciens. Pris en charge depuis Internet Explorer 6 et tous les navigateurs actuels (Chrome, Firefox, Safari, Edge, Opera), il fait partie des spécifications HTML depuis les premières versions du langage. Aucun polyfill ou solution de contournement n'est nécessaire pour garantir son fonctionnement.
Évolution de l'attribut checked entre HTML 4.01 et HTML5
L'attribut checked n'a connu aucune modification entre HTML 4.01 et HTML5. Sa syntaxe, son comportement et ses cas d'usage restent strictement identiques dans toutes les versions d'HTML. Cette stabilité garantit une rétrocompatibilité parfaite : un code écrit en HTML 4.01 fonctionnera sans modification en HTML5, et inversement.
La seule différence notable concerne la syntaxe préférée : HTML5 recommande l'utilisation de la forme simplifiée checked sans valeur, tandis que XHTML imposait la syntaxe checked="checked". Les deux restent valides en HTML5.
Manipulation de l'attribut checked avec JavaScript
JavaScript offre plusieurs méthodes pour interagir dynamiquement avec l'attribut checked, permettant de créer des formulaires intelligents et réactifs. Voici les techniques les plus courantes :
// Vérifier si un élément est coché
const isChecked = document.getElementById('monInput').checked;
if (isChecked) { console.log('Case cochée'); }
// Cocher un élément programmatiquement
document.getElementById('monInput').checked = true;
// Décocher un élément
document.getElementById('monInput').checked = false;
// Basculer l'état (toggle)
const element = document.getElementById('monInput');
element.checked = !element.checked;
// Détecter les changements d'état
element.addEventListener('change', function() {
console.log('État modifié:', this.checked);
});
Bonnes pratiques et conseils d'utilisation de l'attribut checked
Accessibilité web : Associez systématiquement vos inputs à des éléments <label> explicites. Utilisez l'attribut for du label pointant vers l'id de l'input, ou englobez directement l'input dans la balise label. Cette pratique améliore considérablement l'expérience pour les utilisateurs de lecteurs d'écran et permet de cliquer sur le texte du label pour cocher l'élément.
Expérience utilisateur (UX) : Ne pré-sélectionnez que les options statistiquement les plus courantes ou recommandées. Une utilisation excessive de l'attribut checked peut frustrer les utilisateurs qui doivent décocher de nombreuses cases. Dans le doute, laissez les formulaires vides et laissez l'utilisateur faire ses propres choix.
Validation de formulaire : Implémentez une double validation : côté client avec JavaScript pour un retour immédiat, et côté serveur (PHP, Node.js, etc.) pour garantir la sécurité et l'intégrité des données reçues. Ne faites jamais confiance uniquement à la validation JavaScript.
Groupes de boutons radio : Assurez-vous que tous les boutons radio d'un même groupe partagent le même attribut name. Un seul élément du groupe peut être marqué checked au chargement de la page.
Formulaires dynamiques : Lorsque vous modifiez l'état checked avec JavaScript, pensez à déclencher manuellement l'événement change si d'autres scripts écoutent cet événement : element.dispatchEvent(new Event('change')).
Différence entre attribut checked et propriété checked
Il est important de distinguer l'attribut HTML checked de la propriété DOM checked en JavaScript :
- L'attribut HTML (
<input checked>) définit uniquement l'état initial au chargement de la page - La propriété JavaScript (
element.checked) reflète l'état actuel de l'élément et peut être modifiée dynamiquement
Quand un utilisateur coche ou décoche manuellement un élément, seule la propriété JavaScript change. L'attribut HTML reste inchangé dans le code source.
Note technique importante : L'attribut checked est un attribut booléen selon les spécifications du W3C. Pour les attributs booléens, c'est la présence ou l'absence de l'attribut qui détermine son état, et non sa valeur. Les syntaxes suivantes sont toutes valides et produisent le même résultat :
<input type="checkbox" checked> (syntaxe recommandée en HTML5)
<input type="checkbox" checked="checked"> (syntaxe XHTML, toujours valide)
<input type="checkbox" checked=""> (valeur vide mais attribut présent)
<input type="checkbox" checked="true"> (toute valeur non-vide équivaut à true)
Pour retirer l'attribut checked, vous devez supprimer complètement l'attribut du HTML, pas simplement lui attribuer une valeur "false".
Par carabde 10 mars 2014