Cet article vous guidera dans la création d'un bouton radio HTML à l'aide d'un exemple pratique.
Comment ajouter un bouton radio en HTML ?
Pour ajouter un bouton radio en HTML, suivez la syntaxe ci-dessous :
< saisir taper = 'radio' Nom = '' évaluer = '' >
Voici la description de la syntaxe indiquée :
- ' taper ' : cet attribut spécifie le type d'entrée que vous souhaitez créer, tel que texte, radio, case à cocher, etc. Pour créer un bouton radio, la valeur de l'attribut doit être définie sur '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.
- ' évaluer ” : Ceci spécifie la valeur qui sera envoyée au serveur lorsque le bouton radio est marqué comme coché.
Exemple : Ajouter un bouton radio en HTML
Cet exemple décrit la procédure d'ajout d'un bouton radio en HTML à l'aide du bouton radio d'entrée. Dans
Étape 1 : Création d'un fichier HTML
Commencez par ajouter une balise
À l'intérieur du
- Tout d'abord, ajoutez le ' ” tag pour donner un titre à la page.
- Puis un ' ” balise 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 sur select et “ évaluer ' comme ' rouge ”. Des valeurs différentes sont attribuées à chaque bouton radio portant 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 marqué par défaut comme coché, attribuez-lui l'attribut ' vérifié ” à ce bouton.
- Enfin, le « <étiquette> ” 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 :
< h1 > Bouton radio HTML h1 >< p > Quelle est votre couleur préférée ? p >
< saisir taper = 'radio' Nom = 'Choisissez la couleur' évaluer = 'rouge' vérifié >
< étiquette pour = 'radio1' > Rouge étiquette >
< Br >
< saisir taper = 'radio' Nom = 'Choisissez la couleur' évaluer = 'bleu' >
< étiquette pour = 'radio1' > Bleu étiquette >
< Br >
< saisir taper = 'radio' Nom = 'Choisissez la couleur' évaluer = 'vert' >
< étiquette pour = 'radio1' > Vert étiquette >
< Br >
< saisir taper = 'radio' Nom = 'Choisissez la couleur' évaluer = 'violet' >
< étiquette pour = 'radio1' > Violet étiquette >
< Br >
< saisir taper = 'radio' Nom = 'Choisissez la couleur' évaluer = 'les autres' >
< étiquette pour = 'radio1' > Les autres étiquette >
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 : Appliquer le style au HTML
La ' div ” indique la balise div que nous avons créée dans le fichier HTML :
- Premièrement le ' Couleur de l'arrière plan ' la propriété est définie comme ' #8197f0 ”.
- ' frontière ' la propriété est définie comme ' 5px pointillé #13023a ', où 5px représente la largeur de la bordure, les pointillés indiquent le type de ligne et ensuite la couleur de la bordure.
- ' rembourrage ' est défini comme ' 20px 100px ' où 20px spécifie le rembourrage du haut et du bas et 100px indique le rembourrage de gauche et de droite.
- Pour le style de police, attribuez le ' famille de polices « valeur de la propriété en tant que » cursive ”.
CSS
div {Couleur de l'arrière plan: #8197f0 ;
bordure : 5px en pointillé #13023a ;
rembourrage : 20px 100px ;
taille de police : 20 px ;
famille de polices : cursive ;
}
On peut voir que l'élément div est stylisé 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 dans des groupes de deux options ou plus. Dans ce groupe, l'utilisateur ne peut sélectionner qu'une seule option. En HTML, un bouton radio peut être créé en utilisant le '