Les formulaires

Voilà bien une mode directement issue des sites professionnels. Il me semble que les webmestres des "pages perso" ont oublié que l'usage du courrier électronique est toujours possible et, à mon avis, bien plus convivial.

Soit, sacrifions à cette mode et étalons aux yeux d'une foule en délire un premier exemple, très simple, de ces "bidules à compléter":

Il est indispensable de renseigner les champs marqués d'une * avant de valider l'envoi
de ce formulaire. Dans le cas contraire, il ne sera pas pris en compte !

Indiquez ici votre nom :

*

Votre adresse électronique :

*

Vos commentaires :

Limité au strict minimum, il n'y a vraiment pas plus simple, sauf à mettre une seule case de saisie !

Heu ... n'essayez pas d'envoyer ce formulaire : il est "bidon" car comportant une adresse Email invalide !

Voyons le code pour le réaliser :

<P><FORM ACTION="http://cgi.civis.net/cgi-bin/Mail/Email-Form" METHOD=POST>

<P><INPUT TYPE="hidden" NAME="Mail Addr" VALUE="invalid@wanamoo.fr">

<INPUT TYPE="hidden" NAME="Mail Subj" VALUE="Commentaires">

<INPUT TYPE="hidden" NAME="URL Back" VALUE="http://armorance.free.fr/valastuc/astuces.htm"></P>

<CENTER><FONT SIZE="-1" FACE="Arial">

<B>Il est indispensable de renseigner les champs marqués d'une </B></FONT><FONT SIZE="-1" FACE="Arial" COLOR="#CC0000"><B>*</B></FONT>

<FONT SIZE="-1" FACE="Arial"><B>avant de valider l'envoi</B>

<BR><B>de ce formulaire. Dans le cas contraire, il ne sera pas pris en compte !</B></FONT></CENTER>

<BLOCKQUOTE><CENTER><FONT FACE="Arial" COLOR="#0033FF">

<B>Indiquez ici votre nom :</B></FONT>

<P><FONT FACE="Arial"><INPUT TYPE=text NAME="Nom" VALUE="" SIZE=50></FONT><FONT FACE="Arial" COLOR="#FF0000"><B>*</B></FONT></P>

<P><FONT FACE="Arial" COLOR="#0033FF"><B>Votre adresse électronique :</B></FONT></P>

<P><FONT FACE="Arial"><INPUT TYPE=text NAME="E-mail" VALUE="" SIZE=50></FONT><FONT FACE="Arial" COLOR="#FF0000"><B>*</B></FONT></P>

<P><FONT FACE="Arial">&nbsp;</FONT><FONT FACE="Arial" COLOR="#0033FF">

<B>Vos commentaires : </B></FONT><FONT FACE="Arial" COLOR="#AF0000"></FONT>

<FONT FACE="Arial"><TEXTAREA NAME=Commentaires ROWS=3 COLS=70 WRAP=virtual></TEXTAREA></FONT></P></CENTER></BLOCKQUOTE>

<CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD WIDTH=109>

<CENTER><FONT FACE="Arial" COLOR="#AF0000"><INPUT TYPE=submit NAME=Envoyer VALUE="Envoyer"></FONT></CENTER></TD>

<TD WIDTH=83>

<CENTER><FONT FACE="Arial"><INPUT TYPE=reset NAME=Annuler

VALUE="Annuler" ></FONT></CENTER>

</TD></TR></TABLE></CENTER></FORM></P>

Aie, aie, aie ... vous n'imaginiez pas cela ! Eh oui, il y a du boulot ! Essayons d'y voir plus clair :

la 1ère Url ( 1ère ligne, .../formulaire.cgi) est celle de votre hébergeur du script CGI (ici CIVIS.NET).

en bleu : votre adresse électronique et l'Url de la page qui sera affichée après l'envoi du formulaire.

en vert, le titre du formulaire qui reviendra dans votre B.A.L, réexpédié par l'hébergeur de CGI.

en rouge, les noms attribués aux cases. Précédés d'une astérisque ils exigent le remplissage du champ.

en fuchsia, la dimension des cases (text NAME) et de la fenêtre de texte (TEXTAREA NAME).

en italiques, les titres et textes qui donnent vos instructions au visiteur.

Voyons quelques définitions de base :

FORM est la balise de base et BLOCKQUOTE celle "d'encadrement" des champs de saisie des formulaires.

ACTION définit l'adressage du contenu des champs vers l'hébergeur CGI, de la B.A.L. du Webmestre et de l'URL de la page à afficher après l'envoi du formulaire.

METHOD est un attribut de sauvegarde définissant la longueur du formulaire : GET limite à 255 caractères par saisie alors que POST ne limite pas la longueur.

SUBMIT est la commande d'envoi du formulaire et RESET permettra d'effacer le contenu des champs de saisie si le visiteur désire les modifier.

Ouf ! voilà un bon morceau déblayé ! Vous êtes d'attaque ? On peut aller plus loin ?

Alors, passons à la :