Boutons radio
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 41 sur 60.
En HTML, les boutons radio sont utilisés pour créer un ensemble d'options mutuellement exclusives, où l'utilisateur ne peut sélectionner qu'une seule option dans le groupe. Les boutons radio sont créés à l'aide de la balise <input> avec l'attribut type défini sur "radio".
Voici la syntaxe de base pour créer un bouton radio en HTML :
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label><input>: La balise qui définit le champ de saisie.type="radio": Un attribut qui spécifie le type de saisie comme un bouton radio.id: Un attribut qui donne au bouton radio un identifiant unique.
name: Un attribut qui regroupe les boutons radio. Tous les boutons radio ayant le même nom appartiennent au même groupe, et une seule option au sein d'un groupe peut être sélectionnée à la fois.
value: Un attribut qui spécifie la valeur associée au bouton radio. Cette valeur est envoyée au serveur lorsque le formulaire est soumis.
<label>: une balise qui fournit une étiquette cliquable pour le bouton radio. L'attributforde l'étiquette doit correspondre à l'attributiddu bouton radio.
Voici un exemple de création d'un groupe de boutons radio :
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label>
<br>
</form>Dans cet exemple, nous avons un formulaire avec trois boutons radio, appartenant tous au même groupe car ils partagent le même attribut name ("mygroup"). Chaque bouton radio possède un id et une value uniques, ainsi qu'un libellé correspondant. Lorsque l'utilisateur sélectionne l'une de ces options et soumet le formulaire, la valeur du bouton radio sélectionné sera envoyée au serveur.
Défi
FacileCréez un document HTML qui inclut un formulaire avec un groupe de boutons radio. Le formulaire doit comporter les éléments suivants :
- Un groupe de trois boutons radio avec le name "color".
- Le premier bouton radio doit avoir l'id "red", la value "red", et un label avec le texte "Red".
- Le deuxième bouton radio doit avoir l'id "green", la value "green", et un label avec le texte "Green".
- Le troisième bouton radio doit avoir l'id "blue", la value "blue", et un label avec le texte "Blue".
- Ajoutez une balise
<br>après chaque label pour créer un saut de ligne.
Aide-mémoire
Les boutons radio créent des options mutuellement exclusives où une seule peut être sélectionnée dans un groupe. Utilisez <input type="radio"> avec des attributs name correspondants pour les regrouper.
Syntaxe de base du bouton radio :
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>Attributs clés :
type="radio": Spécifie l'entrée comme un bouton radioid: Identifiant unique pour le bouton radioname: Regroupe les boutons radio ensemble (même nom = même groupe)value: Valeur envoyée lors de la soumission du formulairefor: Lie l'étiquette au bouton radio en utilisant l'id
Exemple d'un groupe de boutons radio :
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label>
</form>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-tête3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page9Formulaires et entrées, partie 2
Boutons radioCases à cocherListes déroulantesBoutonsBoutons dans les formulairesRécapitulatif - Formulaires n°1Récapitulatif - Formulaires n°2