Chapitre 5 HTML, les formulaires

5.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, etc.) 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)">
</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. (Ce peut être aussi MAIL, mais c'est déconseillé... Cela ne marche que si le navigateur de l'utilisateur est BIEN configuré. De toutes façons il faudra traiter les données après, et les stocker dans des boîtes aux lettres ne facilite pas l'automatisation de cette tâche.)
« (3) » désigne le texte qui va apparaître dans le bouton d'envoi.

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.

5.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 pour une zone de saisie au sens habituel du terme (une zone rectangulaire où l'utilisateur écrit des données, sur une seule ligne) ; c'est ce qui sera dans cette zone qui sera envoyé au programme de traitement ;
  - password pour une zone de saisie de mot de passe (identique à text, mais le texte saisi n'apparaît à l'écran que sous la forme d'astérisques, pour éviter d'être lisible par une tierce personne) ;
  - checkbox pour une case à cocher ;
  - radio pour un bouton radio (des boutons radios de même nom sont mutuellement exclusifs) ;
  - submit pour un bouton d'envoi ; c'est le clic sur ce bouton qui envoie le contenu du formulaire au programme de traitement ;
  - hidden pour une variable cachée ; permet de cacher des valeurs nécessaires au traitement mais qu'on ne veut pas voir affichées à l'écran ; attention, caché ne veut pas dire secret : ces valeurs sont visibles dans le code source de la page ;
  - reset pour remettre les zones de saisie à leurs valeurs par défaut (les valeurs qu'elles ont lors du chargement de la page) ;
- nom est le nom de la variable qui sera envoyé au programme ; cela n'a a priori pas de sens pour un bouton submit ou reset, mais c'est absolument nécessaire pour les autres ; les zones doivent en principe avoir des noms différents, sauf pour le boutons radios : les boutons radios de même nom sont mutuellement exclusifs ;
- value est la valeur du contrôle :
  - pour text et password il s'agit d'une valeur qui permet de pré-remplir la zone ;
  - pour checkbox et radio c'est la valeur qui sera donnée à la variable si la case est sélectionnée ;
  - pour submit et hidden c'est le texte qui sera écrit dans le bouton ;
  - pour hidden c'est la valeur qui sera donnée à la variable.
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>
```
Cette zone permettra d'envoyer une variable de nom menu qui aura pour valeur le choix sélectionné ;
Pour pré-sélectionner un choix dans la liste il suffit d'ajouter le mot SELECTED dans la balise <OPTION> correspondante.
On peut avoir besoin d'envoyer une valeur différente de ce qui est affichée (par exemple demander à l'utilisateur de choisir une personne par ses nom et prénom, et envoyer l'identifiant de cette personne dans une table d'une base de données). On utilisera alors l'attribut VALUE dans la balise <OPTION> comme par exemple :
```
    <SELECT NAME="responsable">
         <OPTION VALUE="1"> marcel durand
         <OPTION VALUE="2"> georges dupont
         <OPTION VALUE="3"> pierre martin
    </SELECT>
```
Dans cet exemple si on choisit georges dupont la variable responsable aura la valeur 2.
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>
```

5.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 :

Vous pouvez tester vos propres formulaires en suivant les instructions de la page :

http://www.grappa.univ-lille3.fr/~torre/Enseignement/TPs/Formulaires

Votre formulaire doit contenir un attribut caché identifiant et le champ ACTION doit contenir la valeur :
http://www.grappa.univ-lille3.fr/~torre/Enseignement/TPs/Formulaires/universel.php

D.Gonzalez (gonzalez@univ-lille3.fr) en date du th ,