Chapter 8 Les Formulaires en HTML

8.1 Introduction

Tôt ou tard, tout concepteur de sites Web doit recourir aux formulaires. Ceux-ci constituent un élément important du développement Web, puisqu'ils permettent de pouvoir recueillir les informations des visiteurs.

Fonctionnellement ce recueil des données se situe coté client, une fois effectué cet ensemble de données est transmis au serveur pour traitement, le résultat du traitement (une page HTML ) sert de retour à l'utilisateur.

Normalement, les formulaires ne sont utilisés que sur des serveurs pouvant lancer des programmes (CGI-BIN, ASP, PHP3, etc...) pour en faire un traitement, ce qui n'est pas forcément le cas d'un provider ordinaire (fournisseur d'accès internet) ou autre "hébergeur" de pages web

8.2 Définir la feuille de formulaire

Le Tag Form: <FORM> et </FORM>

Sa fonction consiste à délimiter les éléments constituant le formulaire et à spécifier les paramètres du formulaire qui sont le nom, l'action, la méthode d'envoi du formulaire au serveur et le type d'encodage.

8.2.1 La syntaxe du formulaire

  <FORM NAME=[nom] ACTION=[action] METHOD=[méthode d'envoi]
      ENCTYPE=[méthode d'encodage]>
     .......
      éléments de formulaire
     .......
  </FORM>

8.2.2 Les attributs de la balise FORM

Ces attributs ne sont pas tous standard, les navigateurs WebTV en définissent un grand nombre supplémentaire.

Name: Le nom du formulaire: utilisé pour y faire référence lors de l'utilisation de script coté client.

Action: Cet attribut détermine le type de destinataire ou si l'on veut l'outil qui sera utilisé pour traiter le formulaire. Les plus communs sont mailto et http. Le premier permet de transmettre les données du formulaire par courrier électronique, tandis que le deuxième sert habituellement à spécifier un CGI .

Exemple: http

  <FORM ACTION="/cgi-shl/mailto.exe" METHOD="post">
     éléments de formulaire
     ...
  </FORM>

METHOD Deux types de méthode concernent la façon dont l'information du formulaire peut être émise par le client:

Figure 8.1: Méthodes du formulaire

GET juxtapose le contenu du formulaire à l'adresse URL ; le CGI accède alors à l'information par l'entremise d'une variable d'environnement QUERY_STRING. Les valeurs du formulaires transmises ne sont pas cryptées.
POST Le contenu du formulaire est envoyé au serveur en tant que bloc de données pour y être traité par le CGI qui le recoit sur son entrée standard

GET constitue la méthode par défaut lorsque celle-ci n'est pas spécifiée. Toutefois, la méthode POST est plus efficace et permet le traitement d'une quantité plus importante de données; La chaîne QUERY_STRING étant limitée par la taille des variables d'environnement, c'est donc cette dernière qui est presque toujours utilisée.

ENCTYPE spécifie l'encodage utilisé pour la forme que prendra le contenu du formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode POST. ENCTYPE peut prendre plusieurs valeurs:

ENCTYPE="application/x-www-form-urlencoded" valeur par défaut; encode le contenu du formulaire selon une forme URL qui est difficilement lisible par le destinataire;
```
 http://Votre.Serveur.com/cgi-bin/VotreScript?ObjetDeFormulaire1=valeur1&... 
```
ENCTYPE="text/plain" le contenu du formulaire sera retourné en format texte lisible par le destinataire; option accompagnée le plus souvent de ACTION=mailto:
ENCTYPE="multipart/form-data" permet d'expédier un fichier attaché au message.

8.2.3 Les composants du formulaire

Il existe plusieurs type de boutons/menus/champs/formulaires il serait fastidieux de tous les examiner en détail ici, mais en voici une petite liste:

Champ mot de passe (sans réelle protection)
Bouton à cocher (un ou plusieurs) Bouton radio (un seul à la fois)
Champs texte (une ligne)
Zone texte (un document)
Attachement de fichiers (intérêt limité)
Champs cachés (avec un numéro de client à l'intérieur par exemple)
Sélection simple (bouton menu déroulant)
Sélection multiple
Bouton d'effacement du formulaire
Bouton de soumission de formulaire (texte)
Bouton de soumission graphique avec coordonnée d'image

La figure 8.2 fournit quelques exemples de ces composants:

Figure 8.2: Principaux attributs de la balise FORM

Remarques: Pour obtenir une notion de session avec des formulaires, c'est à dire créer plusieurs formulaires sous la forme d'une seule transaction, il faut: faire constituer les formulaires de façon dynamique par les script coté serveur, qui doit conserver les valeurs des formulaires précédents dans des champs <input type='hidden' >.

8.3 Recourir à un CGI pour traiter le contenu du formulaire

 <FORM ACTION="TraiteFormulaire.php3" METHOD="POST">
    Votre nom : <INPUT TYPE=TEXT NAME=nom> // création d'une zone de saisie
    Votre age : <INPUT TYPE=TEXT NAME=age>
    <INPUT TYPE=SUBMIT NAME="Ok">          // création d'un bouton OK
 </FORM>

Lorsque le bouton Ok est validé, la page TraiteFormulaire.php3 est appelée. Cette dernière contient des ordres PHP pour formatter une page html dynamique en fonction des données du formulaire tels que:

     ...
     Bonjour <?php echo $nom; ?>, <P>
     vous avez bien <?php echo $age; ?> ans <BR>
     cette année ?
     ...

ou pour relancer le formulaire avec les noms et l'âge déja saisi

    ...
    Bonjour <?php echo $nom; ?>, <P>
    vous avez bien <?php echo $age; ?> ans <BR>
    cette année ?
    ...
   <FORM ACTION="TraiteFormulaire.php3" METHOD="POST">
     Votre nom : <INPUT TYPE=TEXT NAME= <%= $nom?>>   // on utilise les variables
     Votre age : <INPUT TYPE=TEXT NAME=<%= $age ?>>   // du premier formulaire 
     <INPUT TYPE=SUBMIT NAME="Ok">          
 </FORM>

enfin pour créer une notion de session, c'est à dire plusieurs formulaires associés sous forme d'une session:

    ...
    Maintenant Monsieur  <php echo $nom; ?>,  <P>
        ...
   <FORM ACTION="TraiteFormulaire2.php3" METHOD="POST">
      <INPUT TYPE=HIDDEN NAME= <%= $nom?>>    
      <INPUT TYPE=HIDDEN NAME=<%= $age ?>>                                                 
     Votre prénom: <INPUT TYPE=TEXT NAME=prenom>
     <INPUT TYPE=SUBMIT NAME="Ok">
  </FORM>

8.3.1 Exemple d'utilisation d'un formulaire associé à une BD

Soit le formulaire correspondant à la figure 8.3)

Figure 8.3: Un exemple de formulaire

décrit par le fichier insertClient.html

<HTML><HEAD><TITLE>Exemple</TITLE></HEAD>
<BODY>
  <center>                                                              
   <form method="post" action="insertClient.php">   // sur action utilisateur
    <table>                                         // le script insertClient.php sera 
     <tr>                                           // lancé coté serveur
      <td>Nom</td>
      <td><input type="text" name="nom"></td>
      <td>E-mail</td>
      <td><input type="text" name="email"></td>
     </tr><tr>
      <th colspan=4> <input type="Submit" value="Ajouter"> </th>
     </tr>
    </table>
   </form>
  </center>
 </BODY></HTML>

et son script associé insertClient.php

<?// Paramètres du SGBD
     $host = "localhost"; // voir hébergeur
     $user = "login"; 
     $pass = "password"; // vide en local
     $bdd = "ma_base"; // nom de la BD
  // connexion au SGBD
     @mysql_connect($host,$user,$pass)
         or die("Impossible de se connecter");
     @mysql_select_db("$bdd")
         or die("Impossible de se connecter");
     $table="ma_table";
  // Ajout du nouveau client
     $query = "INSERT INTO $table(nom,email) VALUES('$nom','$email')"; 
     $result = mysql_query($query);
     mysql_close();
 ?>