Réaliser sa page Web
   Leçon 13 : Les formulaires

Fonctionnement des formulaires

Les formulaires permettent de saisir de l'information qui sera ensuite envoyée au serveur pour traitement. Ils présentent à l'utilisateur des zones de texte, des choix multiples par le biais de boutons cliquables, de listes, etc... Il convient donc d'écrire, en sus du formulaire lui-même une procédure de récupération et de traitement des informations au niveau du serveur. Ceci est habituellement réalisé à l'aide d'un langage de script, comme le PERL, ce qui est hors de propos dans ce cours d'initiation. Toutefois, une des actions possibles déclenchées par un formulaire est l'envoi d'un courrier électronique qui récapitule toutes les informations entrées par le visiteur.

La commande principale pour créer un formulaire dans un document HTML est la balise <FORM> </FORM>. Ainsi, pour le courrier électronique, voici la commande généralement utilisée:

<FORM METHOD="POST" ACTION="mailto:VotreEmail@Provider.fr" ENCTYPE="text/plain">
Ici, il y aura des zones de texte à remplir, où faire des choix, etc. de la forme <INPUT TYPE=... >
</FORM>


Les différentes options

  1. La balise INPUT TYPE="TEXT" : création d'une zone de saisie.

    Exemple d'une ligne sur 20 colonnes :
    Votre nom et prénom :
    <INPUT TYPE="TEXT" NAME="NOM" SIZE="20">

    Résultat :
    Votre nom et prénom :





  2. La balise INPUT TYPE="CHECKBOX" crée une série de cases à cocher non exclusives.

    Exemple sur trois cases :
    Quelle est votre langue maternelle ?
    Français <INPUT TYPE="CHECKBOX" NAME="CHOIX1">
    Anglais <INPUT TYPE="CHECKBOX" NAME="CHOIX2">
    Autre <INPUT TYPE="CHECKBOX" NAME="CHOIX3">

    Résultat :
    Quelle est votre langue maternelle ?
    Français Anglais Autre




  3. La balise INPUT TYPE="RADIO" crée une série de cases à cocher exclusives.

    Exemple :
    Femme ou homme ?
    Femme <INPUT TYPE="RADIO" NAME="SEXE" VALUE="FEMME">
    Homme <INPUT TYPE="RADIO" NAME="SEXE" VALUE="HOMME">

    Résultat :
    Femme ou homme ?
    Femme Homme




  4. La balise SELECT permet de mettre en place des menus déroulants.
    Avec l'attribut SIZE="nombre d'options du menu", le menu est présenté déjà déroulé

    Exemple :
    De quel continent êtes-vous ?
    <SELECT NAME="CONTINENT" SIZE="3">
    <OPTION SELECTED>Afrique
    <OPTION>Amérique
    <OPTION>Asie
    <OPTION>Europe
    <OPTION>Océanie
    </SELECT>

    Résultat :

    De quel continent êtes-vous ?



    Alors que si l'attribut SIZE est omis, le menu est présenté refermé

    Exemple :
    De quel continent êtes-vous ?
    <SELECT NAME="CONTINENT2">
    <OPTION>Afrique
    <OPTION >Amérique
    <OPTION>Asie
    <OPTION >Europe
    <OPTION>Océanie</SELECT>

    Résultat :

    De quel continent êtes-vous ?





  5. La balise TEXTAREA crée une zone de saisie multi-lignes. Il convient de spécifier la taille de cette zone avec ROWS="valeur" et COLS="valeur"

    Exemple :
    Donnez vos impressions :
    <CENTER>
    <TEXTAREA NAME="Impressions" ROWS="5" COLS="30"> </TEXTAREA>
    </CENTER>

    Résultat :
    Donnez vos impressions :





  6. La balise SUBMIT crée un bouton qui sert à déclencher l'action associée au formulaire, en général l'envoyer au serveur pour traitement. L'attribut VALUE="Message" indique le texte à placer dans le bouton.

    Exemple :
    <INPUT TYPE="SUBMIT" VALUE="Envoyer" SIZE="40">

    Résultat :





  7. La balise RESET crée un bouton qui sert à effacer ce que vous avez rempli dans un formulaire, sans l'envoyer.

    Exemple :
    <INPUT TYPE="RESET" VALUE="Effacer" SIZE="30">

    Résultat :







Quelques astuces

L'option VALUE="..." sert à attribuer une valeur par défaut. Par exemple :
<INPUT TYPE="TEXT" NAME="ADRESSE" VALUE="1 RUE DE LA PLACE" SIZE="30">
Donne


Il est aussi possible de définir une longueur maximum de saisie grâce à : MAXLENGTH="10"


Dans une liste à choix multiples, pour définir un choix par défaut utilisez l'option CHECKED :
<INPUT TYPE="RADIO" NAME="ami" VALUE="Paul" CHECKED> Paul<BR>
<INPUT TYPE="RADIO" NAME="ami" VALUE="Jean"> Jean<BR>
<INPUT TYPE="RADIO" NAME="ami" VALUE="Robert"> Robert<P>



Un formulaire complet

Qui sont tes amis ?
Paul
Jean
Julien
Isabelle

Ton meilleur ami ?
Paul
Jean
Julien
Isabelle


Copier-coller ce texte

Vous recevrez ensuite un mail avec ce résultat :
ami?..Jean=oui
ami?..Isabelle=oui
meilleur ami?=Julien

En général les formulaires sont accompagnés de Scripts JavaScript dont le rôle est de vérifier la validité des informations entrées avant l'envoi au serveur.

   On résume :
  • Chaque INPUT doit avoir un NAME
  • VALUE donne la valeur par défaut, CHECKED l'option validée par défaut.