Un bouton radio est un élément interactif de HTML, qui peut être créé à l'aide du «”Tag ayant le type d'attribut avec la valeur"radio". Les utilisateurs peuvent sélectionner une option dans la liste fournie. Ce bouton est généralement utilisé lorsqu'une seule option doit être sélectionnée dans différents scénarios, tels que la sélection de genre, la sélection des groupes sanguins, et plus.

Cet article vous guidera dans la création d'un bouton radio HTML à l'aide d'un exemple pratique.

Comment ajouter un bouton radio dans HTML?

Pour ajouter un bouton radio dans HTML, suivez la syntaxe dirigée ci-dessous:

Voici la description de la syntaxe indiquée:

• "taper»: Cet attribut spécifie le type d'entrée que vous souhaitez créer comme du texte, de la radio, de la case, et plus encore. Pour créer un bouton radio, la valeur d'attribut doit être définie sous forme de «radio».
• "nom»: Il définit le nom de l'élément d'entrée. Cet attribut doit être le même pour la liste des boutons radio.
• "valeur»: Cela spécifie la valeur qui sera envoyée au serveur lorsque le bouton radio est marqué comme vérifié.

Exemple: ajout d'un bouton radio dans HTML

Cet exemple discutera de la procédure d'ajout d'un bouton radio dans HTML à l'aide du bouton Radio d'entrée. Dans

Étape 1: Création d'un fichier HTML

Tout d'abord, ajoutez une balise dans le fichier html:

À l'intérieur du créé:

• Tout d'abord, ajoutez le "

  ”Tag pour donner une tête à la page.

• Puis un "

  ”Tag pour un paragraphe ou une ligne de texte.

• Après cela, la balise d'entrée est ajoutée avec un attribut "taper"Avoir de la valeur"radio», Le nom est défini comme sélectionné, et«valeur" comme "rouge". Différentes valeurs sont données à chaque bouton radio qui a le même nom. Le même nom représente le même groupe ou la même liste.
• Si vous souhaitez ajouter un bouton qui est par défaut marqué comme vérifié, affectez l'attribut "vérifié«À ce bouton.
• Enfin, le «"L'élément sur chaque bouton radio est utilisé pour ajouter des légendes. Il offre également une meilleure accessibilité.

Le code ci-dessous est l'interprétation du scénario ci-dessus:

Bouton radio HTML

Quelle est votre couleur préférée?

Rouge



Bleu



Vert



Violet



Autres

On peut voir que les boutons radio sont créés avec succès:

Vous pouvez également appliquer des styles au bouton radio créé ci-dessus en suivant le code CSS mentionné ci-dessous.

Étape 2: Application du style à HTML

Le "div»Indique la balise DIV que nous avons créée dans le fichier HTML:

• Premièrement la "Couleur de l'arrière plan«La propriété est définie comme«# 8197F0".
• "frontière«La propriété est définie comme«5px en pointillé # 13023A”, Où 5px représente la largeur de la bordure, pointillé indique le type de ligne, et ensuite indique la couleur de la bordure.
• "rembourrage"Est défini comme"20px 100px”Où 20px spécifie le rembourrage en haut et en bas et 100px indique le rembourrage de gauche et de droite.
• Pour le style de police, affectez le «famille de polices«Valeur de la propriété comme«cursive".

CSS

div
Color d'arrière-plan: # 8197F0;
Border: 5px pointillé # 13023A;
rembourrage: 20px 100px;
taille de police: 20px;
Font-Family: Cursive;

On peut voir que l'élément div est stylé avec succès:

C'est ça! Nous avons expliqué en détail le bouton radio HTML.

Conclusion

Un bouton radio est une entrée qui apparaît toujours en groupes de deux ou plusieurs options. À partir de ce groupe, l'utilisateur ne peut sélectionner qu'une seule option. Dans HTML, un bouton radio peut être créé à l'aide du "”Tag ayant le type d'attribut avec la valeur"radio". Ce blog a démontré la méthode pour ajouter des boutons radio dans HTML.