Comment valider les boutons radio sur une page Web
Share
La configuration et la validation des boutons radio semblent être le champ du formulaire qui donne le plus de difficultés à la configuration à de nombreux webmasters. En fait, la configuration de ces champs est la plus simple de toutes les zones de formulaire à valider car les boutons radio définissent une valeur qui ne doit être testée que lorsque le formulaire est soumis..
La difficulté avec les boutons radio est qu'il y a au moins deux et généralement plus de champs qui doivent être placés sur le formulaire, reliés ensemble et testés en un seul groupe. À condition que vous utilisiez les conventions de dénomination et la disposition correctes pour vos boutons, vous n'aurez aucun problème.
Configurer le groupe de boutons radio
La première chose à regarder lors de l'utilisation des boutons radio sur notre formulaire est de savoir comment les boutons doivent être codés pour qu'ils fonctionnent correctement comme boutons radio. Le comportement souhaité que nous voulons est d'avoir un seul bouton sélectionné à la fois; lorsqu'un bouton est sélectionné, tout bouton précédemment sélectionné sera automatiquement désélectionné.
La solution ici est de donner à tous les boutons radio du groupe le même nom mais des valeurs différentes. Voici le code utilisé pour le bouton radio lui-même.
La création de plusieurs groupes de boutons radio pour le même formulaire est également simple. Il vous suffit de fournir au deuxième groupe de boutons radio un nom différent de celui utilisé pour le premier groupe.
Le champ de nom détermine à quel groupe appartient un bouton particulier. La valeur qui sera transmise pour un groupe spécifique lorsque le formulaire est soumis sera la valeur du bouton dans le groupe qui est sélectionné au moment où le formulaire est soumis.
Décrivez chaque bouton
Pour que la personne remplissant le formulaire comprenne ce que fait chaque bouton radio de notre groupe, nous devons fournir des descriptions pour chaque bouton. La façon la plus simple de le faire est de fournir une description sous forme de texte immédiatement après le bouton.
Cependant, il y a quelques problèmes avec l'utilisation de texte brut:
- Le texte peut être visuellement associé au bouton radio, mais il peut ne pas être clair pour certains qui utilisent des lecteurs d'écran, par exemple.
- Dans la plupart des interfaces utilisateur utilisant des boutons radio, le texte associé au bouton est cliquable et peut sélectionner son bouton radio associé. Dans notre cas ici, le texte ne fonctionnera pas de cette manière à moins qu'il ne soit spécifiquement associé au bouton.
Association de texte à un bouton radio
Pour associer le texte à son bouton radio correspondant afin que cliquer sur le texte sélectionne ce bouton, nous devons faire un ajout supplémentaire au code de chaque bouton en entourant le bouton entier et son texte associé dans une étiquette.
Voici à quoi ressemblerait le code HTML complet de l'un des boutons:
bouton un
En tant que bouton radio avec le nom d'ID mentionné dans le pour paramètre de la balise d'étiquette est en fait contenu dans la balise elle-même, le pour et id les paramètres sont redondants dans certains navigateurs. Cependant, leurs navigateurs ne sont souvent pas assez intelligents pour reconnaître l'imbrication, il est donc utile de les installer pour maximiser le nombre de navigateurs dans lesquels le code fonctionnera..
Cela termine le codage des boutons radio eux-mêmes. La dernière étape consiste à configurer la validation des boutons radio à l'aide de JavaScript.
