Les formulaires en HTML

Chapitre 17

Les formulaires en HTML

17.1

Présentation

Les formulaires de saisie permettent à l'utilisateur de fournir des informations et ainsi d'obtenir une réponse personnalisée. Les informations contenues dans les champs remplis par l'utilisateur sont transmises par le programme client au serveur qui les transmet à son tour à un programme de traitement, soit un CGI (Common Gateway Interface), soit un script de type PHP. La structure d'un formulaire de saisie est simple, elle se compose d'un élément FORM contenant essentiellement une suite de contrôles (éléments INPUT, TEXTAREA, SELECT, BUTTON, ...) mais aussi des éléments de structuration de document afin d'aligner correctement les champs d'entrée. Globalement un formulaire se présente sous cette forme :

<FORM METHOD="(1)" ACTION="(2)"> du texte, des boutons, des zones de saisie ... <INPUT TYPE="submit" VALUE="(3)"> <INPUT TYPE="reset" VALUE="(4)"> </FORM>

où :

« (1) » désigne la méthode à utiliser pour envoyer les informations ; c'est « GET » (par défaut ; les données du formulaire sont envoyées dans l'URL) ou « POST » (les données sont envoyées dans le corps du message, elles ne sont donc pas visibles dans l'URL).
« (2) » désigne l'URL du programme (CGI, PHP, etc.) qui va traiter les données.
« (3) » désigne le texte qui va apparaître dans le bouton d'envoi.
« (4) » désigne le texte qui va apparaître dans le bouton qui réinitialise le formulaire.

Dans l'affichage de la page, rien ne distingue le formulaire du reste du texte. Il est donc conseillé de le séparer du reste par la balise « <HR> » avant et après, ou le mettre dans un tableau aux bordures visibles.

17.2

Principaux contrôles

Les principaux contrôles sont :

INPUT : les zones de saisie, les boutons radios et les cases à cocher sont définis par ce contrôle ; la syntaxe (simplifiée) en est :
<INPUT TYPE="type" NAME=="nom" VALUE="valeur">
où :
- type peut être text, password, checkbox, radio, submit, reset.
- nom est le nom de la variable qui sera envoyé au programme.
- value est la valeur par défaut du contrôle.
SELECT : pour créer des listes déroulantes ; exemple d'utilisation :
<SELECT NAME="menu"> <OPTION> premier choix <OPTION> deuxième choix <OPTION> troisième choix </SELECT>
TEXTAREA : pour des zones de saisies plus grandes qu'avec INPUT ; exemple d'utilisation :
<TEXTAREA NAME="nom" ROWS="4" COLS="40"> Texte par défaut... </TEXTAREA>

17.3

Exemples

Vous pourrez trouver deux exemples (presque identiques, sauf pour la méthode d'envoi : GET pour l'un, POST pour l'autre) aux adresses suivantes :

17.4

En savoir plus

Vous pourrez trouver plus de détails aux adresses suivantes :

http://diwww.epfl.ch/w3lsp/pub/coursweb/ch7.frm.html : Introduction à la Création de Documents pour le World Wide Web, chapitre « Formulaires de saisie », Oscar Figueiredo.
http://www.imaginet.fr/ime/nethtm2.htm : UNGI (Un nouveau Guide Internet), Gilles Maire.
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html : A Beginner's Guide to HTML.
http://www.bfree.on.ca/HTML/lesson16.htm : Html Tutorials, « Lesson 16 - Forms », John C. Gilson
http://hotwired.lycos.com/webmonkey/99/30/index4a.html?tw=authoring : Good Forms, Jay Greenspan
http://www.uwa.edu.au/cwis/howto/forms.html : How to write HTML Forms, University of Western Australia

D.Gonzalez (gonzalez@univ-lille3.fr) en date du 24 janvier 2002