Les formulaires

Tôt ou tard vous serez amené à faire un formulaire pour votre site web. Pourquoi, et dans quel but ?

Ne vous est-il jamais arrivé de remarquer que votre site manque un peu de mouvements ? Parce qu'en fait, un site web, au départ, c'était fait pour lire et obtenir des informations.

Mais on peut faire bien mieux.
On peut ajouter quelques ingrédients qui demandent à l'internaute d' "agir".

Ces ingrédients s'appellent : les formulaires.

Ainsi, votre site aura des éléments des programmes informatiques : cases à cocher, boutons, zones pour écrire, listes déroulantes, boutons d'options...

En général, par la suite, on clique sur un bouton "Envoyer", ce qui déclenche le traitement des données que l'utilisateur a entrées, et leur envoi sur le site, sur votre courrier électronique...
Voilà en gros à quoi consiste un formulaire.

Quelques exemples, pour vous montrer leur utilité :

Un questionnaire sur l'internaute, ses habitudes et ce qui lui plaît ou pas sur votre site (très fréquent).
Un vote pour un jeu, une idée, un site ou pour tout autre chose.
Une commande pour votre logiciel ou un de vos CD dont vous voulez vous débarrasser.

A vous d'imaginer tout ce qu'un formulaire pourrait apporter à votre site.
Cependant, évitez de poser des questions qui ennuieraient l'internaute : votre âge, votre adresse, votre numéro de carte bancaire... Essayez de préserver l'anonymat de cette personne.

Mais bien sûr, tout ce qui est intéressant est difficile à faire. Sachez que, si vous avez bien suivi (et compris) tous les chapitres de Apprenez le HTML, vous n'aurez pas trop de problèmes. Sinon, accrochez-vous un peu, mais je pense que vous pouvez y arriver quand même.

Créer un formulaire

Définissez l'endroit où se trouvera votre formulaire. Utilisez pour cela le tag <form>. Refermez-le plus loin, comme ceci :

<form>
</form>

Evidemment, ce tag a besoin d'attributs. Le premier est : "action". On le précise par le chemin d'accès du programme qui va traiter le formulaire.

Comme je vous l'ai déjà dit, il faut que ces données soient traitées à partir d'un programme. La meilleure solution consiste à créer un script CGI, comme nous le verrons plus loin. Si vous souhaitez que la réponse au formulaire vous soit directement envoyée par mail, écrivez par exemple (en remplaçant cette adresse par la votre) :

<form action="mailto:[email protected]">
</form>

Le deuxième attribut est "method". On le précise par GET ou POST. Lequel choisir ?

GET permet d'envoyer des données ne dépassant pas 1Ko, ce qui est peu.
POST est plus pratique car non limité. Il vous sera utile si vous envoyez les données par mail.

Conclusion, si vous hésitez, optez pour POST, comme ceci :

<form method="post">
</form>

Zones de saisie

A l'intérieur du tag <form>, vous allez définir votre formulaire. Vous pouvez bien sûr mettre des phrases et utiliser des tags pour mettre en forme du texte.

Vous avez plusieurs moyens pour demander des informations à l'internaute. Un des plus fréquents est la zone de saisie.

Une zone de saisie ressemble à ça :

Zone de saisie monoligne

Ecrivez le tag <input>. Il ne doit pas être refermé. Comme pour les images, il sert juste à dire qu'il y a quelque chose là.

Précisez l'attribut "name" par le nom que vous voulez donner à cette zone de saisie. Cela ne sera pas affiché à l'écran, mais vous en aurez besoin pour traiter les données. Donnez un nom représentatif de préférence.
Exemple :

<form action="mailto:[email protected]" method="post">
<input name="nomduchat">
</form>

Il vaut mieux éviter les majuscules, les espaces et autres caractères.

Vous devez aussi donner d'autres informations obligatoires.

Il y a l'attribut "size" que l'on précise par la longueur de la zone de saisie.
"maxlength", quant à lui, indique le nombre maximum de caractères autorisés.

Petit exemple :

<form action="mailto:[email protected]" method="post">
Cette zone de saisie est de taille 6 et est limitée à 6 
caractères : <input name="nomduchat" size="6" maxlength="6">
<p>
Celle-ci est de taille 6, mais d'une longueur maximale de 
4 caractères : <input name="nomduchien" size="6" 
maxlength="4">
<p>
Celle-là est de taille 6 est limitée à 9 caractères : 
<input name="nomduperroquet" size="6" maxlength="9">
</form>

Vous pouvez aussi demander à ce que l'internaute respecte certaines conditions. Imaginez que demandiez une adresse e-mail, et qu'on vous renvoit quelque chose du type : "Blabla"...

Heureusement, un attribut, non obligatoire celui-ci, va vous venir en aide.
Il s'appelle "type". Ce petit tableau vous explique comment l'utiliser :

Valeur de "type" Description

int Un nombre entier doit être entré.
float Un nombre décimal doit être entré

date Une date doit être entrée. Exemple : 07/10/96
url Une adresse e-mail doit être entrée. Exemple : [email protected]

password
Le texte entré est masqué par des * :

Valeur de "type"	Description
int	Un nombre entier doit être entré.
float	Un nombre décimal doit être entré
date	Une date doit être entrée. Exemple : 07/10/96
url	Une adresse e-mail doit être entrée. Exemple : [email protected]
password	Le texte entré est masqué par des * :

Si vous le désirez, vous pouvez utiliser aussi les attributs "max" et "min". Ils permettent de définir respectivement le plus grand nombre et le plus petit qui puisse être entré. A utiliser avec l'attribut type="int" ou type="float".

Zone de saisie multiligne

Le tag à utiliser pour une zone de saisie à plusieurs lignes est différent de ce que nous venons de voir.

Il s'agit de <textarea>. Pensez à mettre l'attribut "name" pour le nommer.

Pour la taille, utilisez les attributs "rows" et "cols". Ils indiquent le nombre de lignes et de colonnes.

Mais attention ! Ce tag doit se refermer plus loin ! Qu'écrit-on entre les 2 ? Le texte à afficher par défaut. Ce que l'internaute voit dans la zone de texte au départ. Si vous ne voulez rien y mettre, n'écrivez rien.

Exemple :

<textarea name="votrevie" rows="5" cols="13">
Tapez votre texte ici.
</textarea>

Listes d'options

Si l'internaute doit faire un seul choix parmi une liste, je vous conseille d'utiliser les listes d'options.
Elles ressemblent à ceci :

Comme une telle liste contient plusieurs choix, on doit indiquer d'abord que l'on fait une liste là et dire où elle s'arrête.

Utilisez le tag <select>, avec l'attribut "name" (c'est obligatoire, il faut le nommer). Refermez ce tag plus loin, comme ceci :

<select name="maliste">

</select>

Pour créer une option, mettez le tag <option> dans le tag <select> et refermez-le plus loin. Entre le <option> et le </option>, tapez le texte à afficher.

Exemple :


Ville : 
<select name="maliste">

<option>Paris</option>
<option>Avignon</option>
<option>Marseille</option>
<option>Lille</option>
<option>Lyon</option>

</select>

Vous pouvez aussi définir une taille précise pour la liste d'options, pour donner cet effet :

Ajoutez l'attribut size au tag <select>, et précisez-le par sa taille, comme ceci :

<select name="maliste" size="5">

Si vous souhaitez que l'on puisse sélectionner plusieurs options, ajoutez l'attribut "multiple" au tag <select> :

<select name="maliste" size="5" multiple>

Ainsi on peut sélectionner plusieurs options en maintenant les touches CTRL ou Maj enfoncées :

Boutons d'option et cases à cocher

Toutefois, les éléments les plus utilisés dans les formulaires (ils sont plus pratiques) sont :

En cliquant un peu partout vous vous êtes sûrement rendu compte que ces deux éléments fonctionnent différemment. On ne peut sélectionner qu'un bouton d'option, tandis que l'on peut choisir pour chaque case à cocher sa valeur (cochée ou non).

Commençons par les boutons d'option...

Les boutons d'option

Pour définir un bouton d'option, on utilise aussi le tag <input>. Pour le différencier des zones de saisie par exemple, on doit lui ajouter l'attribut "type" et le préciser par "radio", comme ceci :

<input type="radio">

Le navigateur sait alors à quoi il a affaire. Mais vous n'êtes pas encore tiré d'affaire ! Vous devez rajouter encore 2 attributs.

Le premier, c'est "name". Vous le connaissez, mais attention ! Ici ça ne fonctionne pas pareil. Ce n'est pas un nom unique que l'on doit donner, mais le nom du groupe de boutons auquel il est relié. Petite explication...

Voyez par vous-même. On a le choix entre Monsieur, Madame, Marié ou Célibataire. Mais vous devez sélectionner un bouton d'option par ligne, alors qu'ici si vous avez cliqué sur Monsieur puis sur Marié, Monsieur se désélectionne ! Il vous faut un groupe dans chacune des lignes. D'où l'intérêt de créer des groupes de boutons. Voici le résultat :Donnez donc la même valeur à l'attribut "name" pour chaque bouton d'option d'un même groupe.

Cependant, tout ceci n'enlève pas le fait que chaque bouton d'option doive avoir un nom unique. Utilisez l'attribut "value" que vous préciserez par le nom du bouton.

Petit exemple :

<form>
<input type="radio" name="Sexe" value="Monsieur">Monsieur, 
<input type="radio" name="Sexe" value="Madame">Madame<p>
<input type="radio" name="Situation" value="Marié">Marié, 
<input type="radio" name="Situation" value="Célibataire">
Célibataire
</form>

Ah ! Et un dernier petit truc... Si vous voulez qu'un bouton d'option soit présélectionné, ajoutez-lui l'attribut "checked". Vous n'avez pas besoin de le préciser.

Cases à cocher

Ici on va aller plus vite, vous savez déjà le principal.

Une case à cocher se crée avec le tag <input> et l'attribut "type=checkbox" :

<input type="checkbox">

On doit aussi créer des groupes de cases à cocher définis avec l'attribut "name" comme pour les boutons d'option. Cela ne change rien de spécial à la vue de l'internaute, car une case à cocher n'obéit pas aux même lois qu'un bouton d'option. Vous aurez pourtant besoin de connaître les noms des groupes pour classer, organiser les données lorsque vous les recevrez.

Donnez un nom différent à chaque case à cocher avec l'attribut "value", ajoutez l'attribut "checked" si vous voulez que la case à cocher soit cochée dès le départ et c'est gagné !
Un exemple ?

<form>
Cochez les aliments que vous aimez ici :<p>
<input type="checkbox" name="AlimentsBons" value="Frites">
Frites, 
<input type="checkbox" name="AlimentsBons" value="Fromage">
Fromage, 
<input type="checkbox" name="AlimentsBons"
 value="Hamburger">Hamburger, 
<input type="checkbox" name="AlimentsBons" value="Viande">
Viande.
<p>Cochez les aliments que vous n'aimez pas :<p>
<input type="checkbox" name="AlimentsPasBons"
 value="Epinards">Epinards, 
<input type="checkbox" name="AlimentsPasBons"
 value="Lézard">Lézard, 
<input type="checkbox" name="AlimentsPasBons"
 value="Escargots">Escargots.
</form>

Résultat :

Boutons de commande

Utilisés en général pour commander l'envoi du formulaire ou sa réinitialisation, les boutons de commande ressemblent à ceci :

Pour faire un tel bouton, vous utiliserez (encore !) le tag <input>, avec l'attribut "type" que l'on pourra préciser de 4 manières :

type="submit" : commande l'envoi du formulaire
type="reset" : remet à zéro le formulaire
type="button" : ne fait rien de spécial, attend une autre instruction (script...)

Quelle que soit la valeur choisie, cela donne un joli bouton de commande.

Toujours la propriété "name" à définir, et un attribut "value" qui indique cette fois ce qui est affiché :

<input name="BoutonFun" type="submit" value="Go go go go !">

Cela donne :

Envoi des données

Ouf ! Enfin ! On va pouvoir récupérer les données.

Revenons au tag <form> et revoyons ses attributs :

<form action="mailto:[email protected]" method="post">
</form>

C'est le schéma que je vous conseille d'utiliser (en remplaçant bien sûr [email protected] par votre adresse).

Vous recevrez chez vous un mail et son contenu dépendra du browser qui l'a envoyé. Avec IE5 par exemple, vous recevez un mail avec comme objet "Formulaire posté avec Microsoft Internet Explorer." et un fichier joint (postdata.att) que vous pourrez ouvrir avec bloc-notes.

Et vous vous apercevrez alors que tout n'est pas rose. En effet, le message est plutôt... codé. Certains caractères sont remplacés par d'autres.

La réponse fonctionne comme ceci : NomDeL'objet=Valeur&NomDeL'Objet=Valeur&NomDeL'Objet=....

Vous comprenez maintenant l'intérêt de bien choisir le nom des objets du formulaire que vous intégrez ?

Référez-vous à ce petit tableau qui vous donne quelques correspondances :

Si vous voyez...	... cela signifie :
%2B	+
%3D	=
%26	&
%27	'
+	Espace

Ce n'est pas évident comme vous pouvez le constater. Mais avec un peu d'habitude on s'y fait.
L'envoi a été commandé par le bouton et la propriété : type="submit". Le message sera envoyé suivant l'instruction qui se trouve dans l'attribut "action" du tag <form>. Il n'y a rien d'autre à ajouter...

Vous pourrez donc finalement comprendre ce que l'internaute a rempli dans son formulaire. Si vous voulez obtenir quelque chose de plus clair (et de plus complexe évidemment !), vous devez avoir recours au CGI. Voyez plus bas.

Le CGI

On va finir tranquillement ce gros chapitre, un peu fastidieux je le reconnais.

Tout d'abord, le CGI (Common Gateway Interface) est un petit langage de programmation qui va vous permettre de ranger, classer et organiser les réponses reçues. C'est tout de même quelque chose qui dépasse ce site exclusivement consacré au HTML.

Je ne peux donc que vous renvoyer vers quelques adresses pour que vous puissiez vous renseigner. Il faudra apprendre à le programmer, et ce n'est pas toujours chose facile...

Solution ! Utiliser des scripts CGI tous prêts ! A condition de parler un minimum d'anglais, of course...

Je vous propose ces adresses :

Bonne pêche !

Et bien voilà... Les formulaires n'ont plus de secrets pour vous.

Vous trouverez dans le chapitre suivant tout ce qu'il faut pour faire de jolis frames. Qu'est-ce que c'est ? Surpriiise !