Créer des formulaires

Auteur: Jérôme Forget. Publié le 17 avril 2007.

Les formulaires permettent la création de documents XHTML interactifs : ils rendent possible la collecte et l'analyse de données afin de donner des réponses personnalisées à l'utilisateur. Avec les formulaires, il est possible de remplir une commande sur un site transactionnel, de s'inscrire à un forum ou à un organisme, ou encore d'obtenir des commentaires de ses lecteurs.

Les formulaires comprennent un ou plusieurs champs d'entrée, des boutons cliquables, des cases à cocher ou même des menus déroulants. Des langages de script comme JavaScript peuvent être utilisés pour valider les données entrées par l'utilisateur et les traiter.

La balise <form>

Tous les éléments d'un formulaire sont compris à l'intérieur de la balise <form></form>. Cette balise requiert au moins deux attributs afin de fonctionner correctement : l'un indique l'adresse du serveur qui va traiter les données, l'autre la méthode utilisée pour transmettre les données au serveur.

L'attribut action donne l'URL de l'application qui va recevoir et traiter les données du formulaire. Une balise <form> avec cet attribut ressemble à ceci :

<form action="http://www.truc.com/cgi-bin/mailform"> ... </form>

L'URL dans cet exemple indique au navigateur de contacter le serveur www.truc.com et d'envoyer les données du formulaire à l'application mailform située dans le dossier cgi-bin.

L'autre attribut requis est l'attribut method. Celui-ci détermine la méthode avec laquelle le navigateur enverra les données au serveur. Il existe deux méthodes : la méthode POST et la méthode GET.

Avec la méthode POST, le navigateur envoie les données au serveur en deux temps : le navigateur contacte d'abord le serveur spécifié dans l'attribut action, puis envoie les données au serveur dans une autre transmission.

Avec la méthode GET, le navigateur envoie les données au serveur en une seule transmission, en attachant les données à l'URL de l'attribut action, à l'aide du séparateur ?.

Voici un exemple d'une balise complète utilisant la méthode GET :

<form method="get" action="http://www.truc.com/cgi-bin/mailform"> ... </form>

Avec la méthode GET, les données sont transmises au serveur par l'URL, comme ceci :

http://www.truc.com/cgi-bin/mailform?nom=Wong&prenom=Jim

La balise <input />

La balise <input /> permet de créer la plupart des éléments de formulaires (champs de texte, listes déroulantes, images cliquables, boutons). L'attribut type de cette balise permet de spécifier l'élément de formulaire voulu.

<form method="get" action="http://www.truc.com/cgi-bin/mailform"> <input type="text" id="codepostal" size="7" maxlength="7" /> </form>

Voici les types d'éléments possibles, selon la spécification HTML 4.01 :

text

Crée une commande de saisie de texte sur une seule ligne.

password

Comme pour text, mais le texte saisi est restitué de manière à dissimuler les caractères (par exemple, une succession de caractères astérisques « * »). Ce type de commande est souvent employé pour les entrées sensibles comme les mots de passe.

checkbox

Crée une case à cocher. Les cases à cocher sont des interrupteurs marche/arrêt qui peuvent être actionnés par l'utilisateur. L'interrupteur est sur « marche » quand l'attribut checked de l'élément de commande est spécifié.

radio

Crée un bouton radio. Les boutons radio sont analogues aux cases à cocher, à la différence que, quand plusieurs boutons partage le même nom de commande, alors ils s'excluent mutuellement : quand l'un est mis sur « marche », tous les autres avec le même nom se mettent sur « arrêt ».

submit

Crée un bouton de soumission. Quand il est actionné, le bouton de soumission soumet le formulaire.

image

Crée un bouton de soumission graphique. La valeur de l'attribut src spécifie l'URI de l'image qui va décorer le bouton. Pour des questions d'accessibilité, les auteurs devraient fournir un texte de remplacement pour l'image au moyen de l'attribut alt.

reset

Crée un bouton de réinitialisation. Quand il est actionné, le bouton de réinitialisation remet toutes les commandes à leur valeur initiale.

button

Crée un bouton poussoir. La valeur de l'attribut value spécifie l'intitulé du bouton. Les boutons poussoirs n'ont pas de comportement par défaut. Chaque bouton poussoir peut avoir des scripts côté client qui sont associés aux attributs d'événement de l'élément. Quand un événement se produit (par exemple, l'utilisateur presse le bouton, le relâche, etc.), le script associé est déclenché.

hidden

Crée une commande cachée.

file

Crée une commande de sélection de fichier.

Textes multilignes

La balise <textarea> permet de créer un champ de texte à plusieurs lignes, comme ceux utilisés pour rédiger un commentaire dans un blogue ou un site d'actualités. Le nombre de lignes utilisées est illimité; tout le contenu du champ de texte sera envoyé au serveur à la soumission du formulaire.

Écrivez votre commentaire <textarea id="commentaire" cols="40" rows="4"> Votre commentaire ici, sur plusieurs lignes, aussi long que vous le désirez. </textarea>

Les attributs cols et rows permettent de déterminer les dimensions du champ de texte, exprimées en nombre de colonnes et de lignes. Nous vous suggérons d'utiliser ces deux attributs ou de contrôler les dimensions de l'élément avec une feuille de style, car les navigateurs, par défaut, créeront le champ de texte le plus petit et inutilisable possible.

• Design Web