Retour au cours

Leçon 24 : Entrées de sélection : Cases à cocher et boutons radio

La Masterclass HTML : De Zéro à Développeur Web

24. Entrées de sélection : Cases à cocher et boutons radio

Ces types de saisie permettent aux utilisateurs de choisir parmi une liste d'options prédéfinies.

24.1 Cases à cocher (type="checkbox")

Les cases à cocher permettent à l'utilisateur de sélectionner zéro, une ou plusieurs options dans une liste.

html <input type="checkbox" id="news" name="subscription" value="newsletter"> <label for="news">S'abonner à la newsletter</label><br>

<input type="checkbox" id="promo" name="subscription" value="promotions"> <label for="promo">Recevoir des promotions</label>

24.2 Boutons radio (type="radio")

Les boutons radio permettent à l'utilisateur de sélectionner une seule option parmi une liste de choix mutuellement exclusifs.

Règle cruciale : Tous les boutons radio d'un groupe doivent partager exactement la même valeur d'attribut name. C'est ainsi que le navigateur sait qu'ils appartiennent au même ensemble.

html

<p>Méthode de contact préférée :</p> <input type="radio" id="email" name="contact" value="email"> <label for="email">E-mail</label><br> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Téléphone</label>

24.3 Présélection d'options

Utilisez l'attribut checked pour qu'une option soit sélectionnée par défaut.

html <input type="checkbox" name="remember_me" checked>