Création d'un bouton radio dans un formulaire HTML5 - Dummies

Pour inclure des boutons radio sur votre page Web HTML5, il est utile de savoir ce qu'ils sont et comment les utiliser. En surface, les cases d'option ressemblent beaucoup à des cases à cocher, mais elles sont différentes de plusieurs façons importantes:

• Les boutons radio n'apparaissent qu'en groupe. Vous pouvez avoir une case à cocher sur un formulaire, mais les boutons radio n'ont de sens que lorsqu'ils sont placés dans des groupes.

• Un seul élément peut être sélectionné. La sélection d'un bouton radio désélectionne les autres. C'est comme un autoradio, où le fait de cliquer sur l'un des boutons prédéfinis désélectionne les autres. (C'est vraiment comme les vieilles radios de voiture où si le bouton de la station sélectionnée était physiquement enfoncé, les autres boutons apparaîtraient.) Bien que ce type de radio ait disparu depuis longtemps, le nom persiste.)

• id de chaque bouton radio est unique. Chaque ID d'une page Web doit être unique et les éléments d'identification de chaque bouton radio doivent respecter ces règles.

• Chaque élément radio a également un attribut name . L'attribut name est utilisé pour spécifier l'ensemble du groupe des objets radio.

• Tous les boutons radio d'un groupe portent le même nom. HTML utilise l'attribut name pour déterminer dans quel groupe se trouve un bouton radio et pour s'assurer qu'un seul bouton d'un groupe est sélectionné.

Cette figure montre un formulaire contenant un groupe de boutons radio pour choisir Small, Medium ou Large:

Consultez le code suivant pour voir la configuration d'une page Web avec des boutons:

formDemo. html

Form Demo
Sélection d'éléments
Boutons radio small medium large

Pour créer un groupe de boutons radio, procédez comme suit:

1. Commencez par créer un élément d'entrée qui servira de base.

2. Réglez le type sur radio .

3. Donnez à chaque bouton radio un identifiant unique .

4. Utilisez l'attribut de nom pour identifier tous les boutons d'un groupe.

5. Pensez également au regroupement visuel.

   L'utilisateur ne pourra pas dire quels boutons font partie d'un groupe en raison du formatage HTML seul. Vous pouvez utiliser des jeux de champs ou d'autres astuces de formatage pour aider l'utilisateur à savoir quels boutons sont dans quel groupe. Tous les boutons d'un groupe doivent être physiquement proches les uns des autres.

6. Cochez l'un des boutons (sélectionné) par défaut.

   Appliquez l'attribut checked = "checked" (fourni par le service department of redundancy) à l'un des éléments afin qu'il commence à être vérifié.

   Si vous ne présélectionnez pas un bouton radio, tous les programmes joints à votre formulaire seront confus.