Menu
CoddyTech

Boutons radio

Fait partie de la section Fondamentaux du Journey HTML de Coddy. Leçon 41 sur 60.

En HTML, les boutons radio servent à créer un ensemble d’options mutuellement exclusives, parmi lesquelles l’utilisateur ne peut en sélectionner qu’une seule. 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 que le type de saisie est un bouton radio.
  • id : Un attribut qui attribue un identifiant unique au bouton radio.
  • 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 de ce 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 un libellé cliquable pour le bouton radio. L’attribut for du libellé doit correspondre à l’attribut id du 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, tous appartenant au même groupe parce qu’ils partagent le même attribut name ("mygroup"). Chaque bouton radio possède un id et un value uniques, ainsi qu’une étiquette correspondante. Lorsque l’utilisateur sélectionne l’une de ces options et soumet le formulaire, la valeur du bouton radio sélectionné est envoyée au serveur.

challenge icon

Défi

Facile

Créez un document HTML qui contient un formulaire avec un groupe de boutons radio. Le formulaire doit comporter les éléments suivants :

  1. Un groupe de trois boutons radio portant le nom "color".
  2. Le premier bouton radio doit avoir l’identifiant "red", la valeur "red" et une étiquette avec le texte "Red".
  3. Le deuxième bouton radio doit avoir l’identifiant "green", la valeur "green" et une étiquette avec le texte "Green".
  4. Le troisième bouton radio doit avoir l’identifiant "blue", la valeur "blue" et une étiquette avec le texte "Blue".
  5. Ajoutez une balise <br> après chaque étiquette pour créer un saut de ligne.

Essayez vous-même

<!DOCTYPE html>
<html>
    <body>
        <!-- Écrivez le code ici -->
    </body>
</html>
quiz iconTestez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Fondamentaux

Entraînez-vous par vous-même : Playground Web