Les champs de saisie d’un formulaire

Chaque champ de saisie est défini par la balise <INPUT>. C’est l’attribut TYPE qui, dans cette balise, détermine sa nature : bouton radio, boîte à cocher, zone texte ou bouton poussoir.

Chaque élément peut être identifié par un nom. Il suffit pour cela de lui adjoindre l’attribut NAME. Cela pourra servir pour un traitement automatique des données.

 

Les zones texte

Les zones texte permettent à l’utilisateur d’entrer librement ce qu’il souhaite. On distingue deux types de zone texte : le champ simple et la fenêtre de saisie.

Pour créer un champ simple, c’est à dire un champ d’une seule ligne, il suffit d’utiliser d’employer <INPUT> avec le type TEXT.

Trois attributs permettent de préciser les caractéristiques du champ :

MAXLENGTH définit la longueur maximale du texte à taper (notez que la taille maximale d’une adresse e-mail est de 320 caractères),
SIZE précise la longueur du champ sur la page,
VALUE permet de donner une valeur par défaut au champ.

Pour définir un champ d’entrée de code postal, on peut ainsi utiliser

Ce qui donne :

 

Pour créer une fenêtre de saisie, il faut employer les balises <TEXTAREA> et </TEXTAREA>.
Les attributs ROWS et COLS permettent de définir respectivement le nombre de lignes et de colonnes de la fenêtre.
Le texte entré entre les deux balises <TEXTAREA> et </TEXTAREA> est celui qui apparaît par défaut dans la fenêtre.

Pour créer une zone pour entrer des remarques, vous pouvez ainsi inclure les balises suivantes :

Ce qui donne :

Entrez ici vos observations

 

Les types PASSWORD et HIDDEN

Si vous voulez que l’information tapée dans un champ de saisie n’apparaisse pas à l’écran, vous devez utiliser le type PASSWORD dans la balise <INPUT>. Les caractères tapés seront alors remplacés par des étoiles.  Vous pouvez ainsi inclure la balise :

Ce qui donne :

Prenez garde : le type PASSWORD n’assure en aucun cas la confidentialité du mot de passe. Il faudrait pour cela que la transmission entre le serveur et le navigateur soit sécurisée.

Les formulaires peuvent aussi contenir des champs cachés, dont l’utilisateur ne peut modifier le contenu. Si l’intérêt de ce type de champ ne paraît pas évident à priori, il permet cependant de transmettre des paramètres aux scripts qui traitent les données du formulaire. Si vous voulez, par exemple, inclure un champ qui détermine le contenu du formulaire, tapez le code :

Les boîtes à cocher

Les boîtes à cocher s’utilisent pour demander à l’utilisateur une réponse du type Oui/Non ou Vrai/Faux. On les crée en employant le type CHECKBOX dans la balise <INPUT>. Ici aussi, on peut employer ici les attributs NAME et VALUE. Il convient cependant d’utiliser un nom (NAME) différent pour chaque boîte.

Pour demander à votre visiteur, quels sports il pratique, vous pouvez par exemple inclure les balises suivantes :

Ce qui donne :

Jogging
Tennis
Natation

Pour cocher une case par défaut, il suffit d’ajouter l’attribut CHECKED.

 

Les boutons radio

Les boutons radio, quant à eux, s’utilisent lorsque vous voulez que l’utilisateur fasse un choix exclusif entre plusieurs options. Ils sont définis dans la balise <INPUT> par le type RADIO. Pour les utiliser, vous devez impérativement donner le même nom (NAME) à tous les boutons.

Pour demander à votre visiteur son sexe (le choix est bien exclusif, non ?), vous pouvez par exemple inclure ces balises :

Ce qui donne :

M
F

Comme pour les boutons à cocher, les boutons radio acceptent les attributs VALUE et CHECKED.

 

Les listes déroulantes

Les boutons de sélection conviennent pour effectuer un choix entre deux ou trois options. Au delà, il est recommandé d’utiliser une liste déroulante.
Une liste se définit dans une zone délimitée par les marqueurs <SELECT> et </SELECT>.
Chaque élément de la liste est déclaré au moyen de la balise <OPTION>.
Le marqueur <SELECT> supporte les attributs NAME et SIZE, ce dernier spécifiant le nombre de lignes affichées.

Pour interroger le visiteur sur son pays d’origine, vous pouvez par exemple inclure le code suivant :

Ce qui donne :
Ile de France
Alsace
Bourgogne
Franche Comté

L’attribut MULTIPLE, qu’on peut placer dans le tag <SELECT>, autorise la sélection de plusieurs options.
<OPTION> présente quant à lui deux attributs : SELECTED, qui détermine l’élément de la liste affiché par défaut, et VALUE, qui permet d’associer une valeur à chaque option.