Groupes de cases à cocher et de boutons radio
Permettez aux utilisateurs de choisir une ou plusieurs options dans un groupe.
Groupes de cases à cocher et de boutons radio est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Cases à cocher
Les cases à cocher permettent aux utilisateurs de sélectionner zéro, une ou plusieurs options :
<label>
<input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>
<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>Envoi des cases à cocher
Les cases à cocher sont envoyées uniquement lorsqu’elles sont cochées :
<form>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->Groupes de cases à cocher avec fieldset
Regroupez les cases à cocher associées avec fieldset + legend :
<fieldset>
<legend>Select your interests</legend>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
<label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>Boutons radio
Les boutons radio permettent aux utilisateurs de choisir exactement une option dans un groupe :
<fieldset>
<legend>Preferred plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->Attribut checked
Présélectionnez un bouton radio ou une case à cocher avec l’attribut checked :
<fieldset>
<legend>Skill level</legend>
<label><input type="radio" name="level" value="beginner" checked> Beginner</label>
<label><input type="radio" name="level" value="intermediate"> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>Mise en forme des cases à cocher et des boutons radio
Cases à cocher personnalisées avec l’astuce utilisant label :
<label class="custom-check">
<input type="checkbox" name="agree">
<span class="checkmark"></span>
I agree
</label>
/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
width: 1.25rem; height: 1.25rem;
border: 2px solid #ddd; border-radius: 3px;
display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }État indéterminé
Les cases à cocher peuvent avoir un état indéterminé (ni cochées ni décochées) :
<input type="checkbox" id="select-all">
<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>Bouton radio sans sélection par défaut
Il est parfois préférable de ne pas présélectionner un bouton radio :
- Une présélection laisse entendre que l’option est recommandée
- Pour les choix obligatoires sans valeur par défaut évidente (genre, formule), laissez-les non sélectionnés
- Ajoutez
requiredpour obliger les utilisateurs à faire un choix explicite
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="m" required> Male</label>
<label><input type="radio" name="gender" value="f" required> Female</label>
<label><input type="radio" name="gender" value="nb" required> Non-binary</label>
<label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>Case à cocher : checked et value
Deux points importants concernant l’envoi des cases à cocher :
<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->
<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked); // true or false
console.log(cb.value); // 'yes' (always, even when unchecked)Navigation au clavier dans les groupes de boutons radio
Comportement au clavier des groupes de boutons radio :
- La touche Tab place le focus dans le groupe, sur le bouton sélectionné ou le premier bouton radio
- Les touches fléchées (↑/↓ ou ←/→) parcourent les options
- La touche Tab sort du groupe et place le focus sur l’élément suivant pouvant le recevoir
Modèle de sélection globale
Modèle pour sélectionner ou désélectionner toutes les cases à cocher :
<label>
<input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
<label><input type="checkbox" class="item" value="1"> Item 1</label>
<label><input type="checkbox" class="item" value="2"> Item 2</label>
<label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>Vérification rapide
Quelle règle concernant l’attribut name fait appartenir les boutons radio au même groupe ?
Récapitulatif : cases à cocher et boutons radio
Points essentiels des cases à cocher et des boutons radio :
- Case à cocher — permet plusieurs sélections ; envoyée uniquement lorsqu’elle est cochée
- Bouton radio — permet de sélectionner exactement une option ; les boutons sont regroupés par
name - Les deux utilisent l’attribut
checkedpour la présélection - Regroupez-les dans
<fieldset>+<legend> - Les touches fléchées permettent de naviguer dans un groupe de boutons radio
Questions Fréquemment Posées
La leçon « Groupes de cases à cocher et de boutons radio » est-elle gratuite ?
Oui — le texte complet de « Groupes de cases à cocher et de boutons radio » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Groupes de cases à cocher et de boutons radio » ?
Permettez aux utilisateurs de choisir une ou plusieurs options dans un groupe. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Groupes de cases à cocher et de boutons radio » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Menus déroulants Select et option
- `Textarea` pour les saisies multilignes
- Groupes de cases à cocher et de boutons radio
- `Datalist` pour la saisie semi-automatique