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