Paragraphe

Le HTML permet l'élaboration de formulaires pour générer sur l'écran des zones de dialogue avec l'utilisateur. Ces formulaires peuvent contenir différents types de zone:

. saisie de texte,

. cases à cocher,

. liste de choix,...

Pour traiter l'information saisie, on utilise un script CGI. Tous les éléments d'un formulaire sont définis entre les balises <FORM> et </FORM>. Cette balise accepte deux attributs:

`METHOD`	:	prend deux valeurs `GET` ou `POST` qui définissent la façon dont sont envoyées au script CGI les données saisies dans le formulaire.
`ACTION`	:	prend pour valeur l'URL du script CGI à exécuter lorsque l'on clique sur le bouton de soumission.

12.1. Les différents éléments d'un formulaire

Zone d'entrée de texte simple (sur une ligne avec scrolling horizontal)

définit une zone dans laquelle on peut saisir un texte. Ce texte sera stocké dans la variable dont le nom est spécifié par l'attribut NAME. ATTENTION ! ce n'est pas une variable d'environnement, c'est une variable pour le langage HTML. L'attribut VALUE est facultatif, il permet de prédéfinir un texte dans la zone.

Bouton de soumission

définit le bouton qui déclenche l'envoi des données au script CGI. Le texte écrit sur le bouton est défini par la valeur de VALUE.

Choix multiple

<INPUT TYPE="CHECKBOX" NAME="choix" VALUE="anchois"> Pizza aux anchois <BR>
<INPUT TYPE="CHECKBOX" NAME="choix" VALUE="fromage"> Pizza au fromage <BR>
<INPUT TYPE="CHECKBOX" NAME="choix" VALUE="jambon"> Pizza au jambon <BR>

définit trois cases à cocher, la valeur du résultat (définie par VALUE) est stockée dans la variable définie par NAME. Plusieurs choix simultanés sont possibles.

Choix exclusif

<INPUT TYPE="RADIO" NAME="choix" VALUE="anchois"> Pizza aux anchois <BR>
<INPUT TYPE="RADIO" NAME="choix" VALUE="fromage"> Pizza au fromage <BR>
<INPUT TYPE="RADIO" NAME="choix" VALUE="jambon" CHECKED> Pizza au jambon <BR>

Ici un seul choix est possible. Cliquer sur une option désélectionne automatiquement les autres. L'attribut CHECKED positionne une option par défaut.

Zone de mot de passe

définit une zone où les caractères tapés sont remplacés par des étoiles. Le résultat (ce qui a été effectivement tapé) est stocké dans la variable spécifiée par l'attribut NAME.

Remise à zéro

permet d'effacer toutes les données saisies dans le formulaire. Le texte écrit sur le bouton est défini par la valeur de VALUE.

Listes déroulantes

<SELECT NAME="Pays">
     <OPTION> France
     <OPTION SELECTED> Italie
     <OPTION> Espagne
</SELECT>

définit une liste déroulante qui apparait sous la forme d'un bouton sur lequel on clique pour voir apparaître les différentes options. L'attribut SELECTED permet de choisir l'option qui sera affichée par défaut. Le résultat du choix est affecté à la variable définie par NAME.

Listes à ascenseurs

<SELECT NAME="Pizza" SIZE=4 MULTIPLE>
     <OPTION> Fromage
     <OPTION> Anchois
     <OPTION> Jambon
     <OPTION> Roquefort
     <OPTION> Figatelli
</SELECT>

définit une liste apparaissant dans une fenêtre de 4 lignes avec ascenseur. Une seule option peut être sélectionnée. En rajoutant l'attribut MULTIPLE dans la balise <SELECT>, un choix multiple est possible. Le résultat est stocké dans la variable définie par NAME.

Zone large de texteskip

Cette balise crée une zone de texte comprenant 4 lignes et 25 colonnes. Il est possible d'y prédéfinir un texte en l'insérant entre les balises <TEXTAREA> et </TEXTAREA>. Le résultat est stocké dans la variable définie par NAME.

Exemple: Voici un formulaire demandant le nom, le prénom et la ville à un utilisateur quelconque

<CENTER>
<FORM METHOD="GET" ACTION="test.cgi">
     <PRE>
          Votre Nom    : <INPUT NAME="nom"> <BR>
          Votre Pr&eacute;nom : <INPUT NAME="prenom"> <BR>
          Ville        : <INPUT NAME="ville"> <BR>
     </PRE> 
     <INPUT TYPE="SUBMIT" VALUE="Valider">
     <INPUT TYPE="RESET" VALUE="Effacer">
</FORM>
</CENTER>

          Votre Nom    :  

          Votre Prénom :  

          Ville        :

12.2. Exploitation des données du formulaire Une fois la soumission du formulaire effectuée, les données sont codées sous la forme suivante:

nom1=valeur1&nom2=valeur2&... où nom1, nom2, ... correspondent aux noms des variables définies par l'attribut NAME et valeur1, valeur2, ... sont les données rentrées par l'utilisateur ou définies par l'attribut VALUE.
Si un champ peut prendre plusieurs valeurs (listes, cases à cocher, ...) alors il apparaît autant de fois qu'il y a eu de valeurs sélectionnées: nom1=valeur1&nom1=valeur2&nom1=valeur3&nom2=valeur4... La chaine est URL-encodée, c'est à dire que les espaces sont remplacés par des +, et les caractères spéciaux (lettres accentuées, ...) par leur valeur hexadécimale (%xx).
Exemple: Si pour le formulaire précédent, on a nom=MAROLEX et prenom=Eléonore, alors ces réponses seront représentées sous la forme suivante: nom=MAROLEX&prenom=El%E9onore.

Avec la méthode GET cette chaine est accolée au script CGI lors de la soumission et apparaît dans le browser dans la zone de l'URL (ce qui peut être génant si l'on transmet un mot de passe). Elle est accessible à partir de la variable d'environnement QUERY_STRING.

Avec la méthode POST la chaine n'est pas accolée à l'URL, elle est envoyée directement sur l'entrée standard du script. La variable d'environnement CONTENT_LENGTH contient la largeur de la chaîne.

Divers utilitaires pour le langage C et Perl existent pour faciliter la gestion des données envoyées par un formulaire.

12.3. L'utilitaire modenv.cgi Cet utilitaire a été mis au point par Didier Benza qui s'occupe (entre autre !) de la gestion du serveur Web de l'Université de Toulon.
Ce script ne marche que si le formulaire utilise la méthode GET. Il permet de créer pour chaque variable du formulaire, une variable d'environnement de même nom dont la valeur sera celle de la variable du formulaire.
Exemple: en considérant le formulaire donné en exemple précédemment, le script test.cgi ci-après, crée un document HTML contenant les réponses de l'utilisateur (en supposant que modenv.cgi se trouve dans un répertoire accessible au serveur).

#!/bin/csh
eval `modenv.cgi`
echo 'Content-type: text/html'
echo ''
echo '<HTML>'
echo '<HEAD><TITLE> Vos réponses </TITLE></HEAD>'
echo '<BODY>'
echo ' Vous vous appelez' <IT>nom </IT>prenom '<BR>'
echo 'et vous habitez' $ville
echo '</BODY>'
echo '</HTML>'

12.4. Le type HIDDEN Ce type d'attribut permet à un formulaire de passer les valeurs de ces données à un autre document HTML (et non pas à un script CGI). Imaginons la situation suivante: pour commander une pizza, un utilisateur doit tout d'abord entrer son nom et son numéro de client. Il aboutit alors sur une page où il peut effectuer son choix. Lorsqu'il valide l'achat, son nom, son numéro de client et le choix effectué sont enregistrés sur le serveur dans un fichier.
Le premier document HTML contient le formulaire d'entrée:

<HTML>
  <HEAD><TITLE> Identification </TITLE></HEAD>
  <BODY>
    <CENTER>
      <FORM METHOD="GET" ACTION="entree.cgi">
        <PRE>
            Entrez votre nom    : <INPUT NAME="nom">
            Entrez votre numéro : <INPUT NAME="numero">
        </PRE>
            <INPUT TYPE="SUBMIT" VALUE="Valider">
            <INPUT TYPE="RESET" VALUE="Effacer">
      </FORM>
    </CENTER>     
  </BODY>
</HTML>

Identification

            Entrez votre nom    : 
            Entrez votre numéro :

Le script entree.cgi doit générer le document HTML proposant les différents types de pizza.

#!/bin/csh
echo 'Content-type: text/html'
echo ''
echo '<HTML>'
echo '<HEAD><TITLE> Pizzas au choix </TITLE></HEAD>'
echo '<BODY>'
echo 'Faites votre choix:'
echo '<FORM METHOD="GET" ACTION="achat.cgi">
echo '<SELECT NAME="achat" SIZE=4>'
echo '  <OPTION> Fromage'
echo '  <OPTION> Anchois'
echo '  <OPTION> Jambon'
echo '  <OPTION> Roquefort'
echo '  <OPTION> Figatelli'
echo '</SELECT>'
echo '<BR><BR>'
echo '<INPUT TYPE="SUBMIT" VALUE="Valider">'
echo '<INPUT TYPE="RESET" VALUE="Effacer">'
echo '</FORM>'
echo '</BODY>'
echo '</HTML>'

Faites votre choix: Le script achat.cgi doit écrire la valeur nom, numero et achat dans un fichier. Le problème qui se pose est le suivant: à l'exécution de achat.cgi, la variable QUERY_STRING ne contiendra que la chaîne achat=fromage (par exemple), puisque achat est la seule variable (HTML) apparaissant dans le formulaire précédent. Le contenu de nom et numero a été perdu puisque ces variables faisaient partie du formulaire précédent. Pour que ces valeurs soient connues du formulaire actuel (généré par entree.cgi), on rajoute dans le script précédent (avant </FORM>) les lignes suivantes:

echo '<INPUT TYPE="HIDDEN" NAME="nom" VALUE="'$nom'">'
echo '<INPUT TYPE="HIDDEN" NAME="numero" VALUE="'$numero'">'

Ceci crée des zone supplémentaires dans le formulaire qui sont invisibles, mais qui permettent de définir les variables nom et numero en leur affectant pour valeur (grâce a l'attribut VALUE) la valeur qui leur avait été attribuée lors de la saisie du formulaire d'entrée et que l'on a récupérée à l'aide de $nom et $numero. Bien sûr, il faut aussi rajouter dans le script précédent la ligne: eval `modenv.cgi`.
Ainsi, lors de la validation du formulaire, la valeur de QUERY_STRING sera: nom=valeur_du_nom&numero=valeur_du_numero&achat=valeur_de_achat on peut alors écrire le script achat.cgi qui conserve toutes ces informations:

#!/bin/csh
eval `modenv.cgi`
echo 'Content type: text/html'
echo ''
echo '<HTML>'
echo '<HEAD><TITLE> Confirmation de commande </TITLE></HEAD>'
echo '<BODY>'
echo 'Votre commande a été enregistrée'
echo '</BODY>'
echo '</HTML>'
echo $nom > commande.txt
echo $numero >> commande.txt
echo $achat >> commande.txt