Champs de saisie à choix multiples pour les formulaires HTML

• Mai 9, 2024

Si vous créez un formulaire sur votre site Web et que vous souhaitez que vos visiteurs choisissent parmi une ou plusieurs options présélectionnées, un champ de saisie à choix multiples est la solution.

Le bouton radio est un choix très courant pour les options à choix multiples; vous les verrez souvent utilisés dans les quiz Web et les formulaires similaires. Ces boutons sont utilisés lorsque vous souhaitez que votre visiteur ne sélectionne qu'une des nombreuses options. Par exemple, si vous construisiez un quiz sur la personnalité de votre site Web et que vous vouliez que les visiteurs sélectionnent leur couleur principale préférée (rouge, bleu ou jaune), vous utiliseriez des boutons radio.

Les boutons radio sont regroupés par leur attribut "nom". Dans un groupe de boutons radio partageant le même nom, les visiteurs ne pourront en sélectionner qu'un; cliquer sur un bouton différent dans le groupe désélectionnera le choix d'origine. L'attribut "valeur" définit à quelle option le bouton radio appartient et l'attribut "vérifié" vous permet de présélectionner une option.

Dans l'exemple ci-dessus, la question peut être codée comme suit:

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

rouge

Bleu

Jaune

Sur votre site, la question ressemblerait à ceci:

Quelle est votre couleur primaire préférée?
rouge
Bleu
Jaune

Le deuxième champ à choix multiple est le menu déroulant. Avec une liste déroulante, vous pouvez choisir d'autoriser plusieurs sélections ou une seule; Les menus déroulants occupent également moins de place sur la page, ce qui vous permet de présenter plus d'options avec moins de monde.

Les menus déroulants utilisent la balise "select" comme base du champ et la balise "option" pour définir les éléments de menu. Vous pouvez modifier la balise "select" avec l'attribut "size", qui spécifie le nombre d'éléments visibles avant que le visiteur clique pour ouvrir le menu, et l'attribut "multiple" qui, s'il est défini, permet au visiteur de sélectionner plusieurs options . Vous pouvez également modifier la balise "option"; l'attribut "sélectionné" vous permet de présélectionner cette option.

Voici un exemple de question à l'aide d'un menu déroulant:

Quel est votre jour le moins préféré de la semaine?


dimanche
Lundi
Mardi
Mercredi
Jeudi
Vendredi
samedi


Sur votre site, la question ressemblerait à:

Quel est votre jour le moins préféré de la semaine?

dimanche
Lundi
Mardi
Mercredi
Jeudi
Vendredi
samedi


La troisième option à choix multiples est la case à cocher. Les cases à cocher sont similaires aux boutons radio, sauf qu'elles permettent toujours aux visiteurs de sélectionner plusieurs options. Les cases à cocher autorisent les mêmes attributs que les boutons radio.

Un exemple de question à l'aide de cases à cocher:

Quel (s) animal (s) possédez-vous?

Chien

Chat

Oiseau

Souris

Hamster

Alligator

Autre


Vos visiteurs verraient:

Quel (s) animal (s) possédez-vous?
Chien
Chat
Oiseau
Souris
Hamster
Alligator
Autre

Instructions Vidéo: Enrichir un formulaire avec plusieurs listes déroulantes (Mai 2024).