formulaires (suite 2)

Les formulaires ... suite 2

Voyons maintenant le script. Il est naturellement volumineux, le formulaire étant important.

Ne vous inquiétez pas : je vais vous faciliter le travail ...

Pour vous permettre aisément la compréhension de sa mise en forme, je vous livre en parallèle, ligne par ligne, les éléments essentiels qui le composent. Les commandes et attributs récurrents ne sont pas explicités : ils l'ont été dans les exposés précédents. Et après tout, si vous êtes arrivés jusqu'ici, il serait grand temps que vous en sachiez un peu plus sur Html : rien de plus bête que de tenter de réaliser quelque chose si l'on n'y comprend rien ... ! Achetez-vous donc un bon bouquin ou allez faire un tour sur un site qui vous initiera (voir dans les "adresses") !

<FORM ACTION="http://perso.wanadoo.fr/bin/formulaire.cgi" METHOD=POST>

<TABLE BORDER=0 BGCOLOR="#CCCCCC" CELLSPACING=0 CELLPADDING=0 WIDTH=750 bordercolor=silver><INPUT TYPE="HIDDEN" NAME="email" VALUE="votre.email@wanadoo.fr">

<INPUT TYPE="HIDDEN" NAME="url" VALUE="http://votre page à afficher après envoi.html">

<INPUT TYPE="HIDDEN" NAME="sujet" VALUE="Formulaire du site Web">

<TR>

<TD HEIGHT=30>

Nom</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="*Nom" VALUE="" SIZE=30>

*</TD>

<TD HEIGHT=30>

Société</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="Société" VALUE="" SIZE=30></TD></TR>

<TR>

<TD HEIGHT=30>Adresse</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME=Adresse VALUE="" SIZE=30></TD>

<TD HEIGHT=30>

Localité</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="Localité" VALUE="" SIZE=30>

</TD></TR>

<TR>

<TD HEIGHT=30>

Département</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="Département" VALUE="" SIZE=30>

</TD>

<TD HEIGHT=30>

Code postal

</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="Code postal" VALUE="" SIZE=30>

</TD></TR>

<TR>

<TD HEIGHT=30>

Pays</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="*Pays" VALUE="" SIZE=30>

*</TD>

<TD HEIGHT=30>

Téléphone</TD>

<TD HEIGHT=30>

<INPUT TYPE=text NAME="Téléphone" VALUE="" SIZE=30>

</TD></TR>

<TR>

<TD HEIGHT=120 BGCOLOR="#C0C0C0">

Que pensez-vous de ce site ?</TD>

<TD HEIGHT=120 BGCOLOR="#C0C0C0">

<TEXTAREA NAME="Votre avis" ROWS=7 COLS=30 WRAP=virtual></TEXTAREA></TD>

<TD HEIGHT=120 BGCOLOR="#C0C0C0">

Avez-vous des suggestions ?</TD>

<TD HEIGHT=120 BGCOLOR="#C0C0C0">

<TEXTAREA NAME=Suggestions ROWS=7 COLS=30 WRAP=virtual></TEXTAREA></TD></TR>

<TR>

<TD HEIGHT=30></TD>

<TD HEIGHT=30></TD>

<TD HEIGHT=30></TD>

<TD HEIGHT=30></TD></TR>

<TR><TD HEIGHT=30>

Quel moteur vous a permis de le trouver ?

</TD>

<TD HEIGHT=30>

<SELECT NAME=Moteurs SIZE=1>

<OPTION>Altavista France

<OPTION>Yahoo France

<OPTION> ... 3ème choix ... etc ...

</SELECT></TD>

<TD HEIGHT=30>

Rubrique préférée ? </TD>

<TD HEIGHT=30>

<SELECT NAME=Rubriques SIZE=3>

<OPTION>La vallée de la Rance maritime

<OPTION>Memento des champignons

<OPTION>Création d'un site Web

</SELECT>

</TD></TR></TABLE>

 



<CENTER><INPUT TYPE=submit NAME=submit VALUE=" Envoyer ">

<INPUT TYPE=reset VALUE="Effacer tout" name=reset></CENTER>

</FORM>

FORM ACTION contient l'adresse de l'hébergeur du script et METHOD a été décrit précédemment.

En bleu, vous écrirez votre adresse électronique et l'Url de retour après l'envoi. Vous verrez plus loin son usage.

En vert, le nom qui apparaîtra comme titre dans votre BAL.

- TR définit la première ligne.

- TD HEIGHT définit la hauteur de la cellule.

- FONT SIZE et FACE définissent taille et police de caractères.

- En italique, un titre que vous attribuez à la case = ici Nom.

INPUT TYPE est la commande chargeant le texte du visiteur. Ce texte sera enregistré dans VALUE et retranscrit en BAL.

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- TR définit ici une nouvelle ligne.

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- En italique, voir l'usage, plus haut.

- INPUT : voir plus haut.

- TR crée une nouvelle ligne.

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- TR crée une nouvelle ligne.

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- Insertion de l'astérique entre les commandes et .

- En italique, voir l'usage plus haut.

- INPUT : voir plus haut.

- En italique, voir l'usage plus haut.

- Définition de la 1ère fenêtre de saisie TEXTAERA : voir plus bas.

- En italique, voir l'usage plus haut.

La commande TEXTAREA , mettant en place un fenêtre de saisie, va contenir les variables ROWS et COLS, déterminant hauteur et largeur de la case.

L'attribut WRAP contrôlera le retour à la ligne.

Les attributs TR enferment des variables d'espacement de lignes.

- En italique, voir l'usage plus haut.

La variable SIZE permet de choisir le nombre de lignes "ouvertes" dans le menu déroulant. Par exemple, SIZE = 3 ouvrira un menu déroulant sur 3 lignes et installera une barre de défilement pour autoriser la lecture des autres choix.

SELECT permettra de connaître le choix du visiteur .

L'attribut OPTION contiendra les différents choix possibles du menu déroulant.

- En italique, voir l'usage plus haut.

Cette case contenant la variable SIZE = 3, soit le nombre exact de choix proposés, les attributs OPTION suffisent pour permettre la mise en place des dits choix sans devoir créer de menu déroulant.

OPTION propose ici les 3 choix.

- Nous fermons ici le tableau contenant le formulaire avec la commande </TABLE>.

Les boutons réalisés par les commandes SUBMIT et RESET permettront la validation et l'envoi pour le premier, l'effacement des données entrées pour le second.

- Le formulaire se termine enfin avec la commande </FORM>.

La valeur entrée dans l'attribut SIZE est celle qui déterminera la longueur d'affichage du champ.

MAXLENGHT=xx est un attribut utilisable après SIZE pour limiter la longueur du texte.

Ok ? Vous avez tout compris ? Alors tant mieux car nous n'avons pas encore épuisé le sujet.

Allons-y :