Les formulaires permettent
avant tout de faire réagir votre visiteur, de l'inviter
à laisser ses impressions, ses commentaires. Vous pouvez
même gérer votre propre livre d'or, Alors jouez
l'interactivité !!.
La création des
formulaires se réalise grâce à plusieurs champs
dans lesquels le visiteur entre une information ou opte pour un
choix. L'information est ensuite envoyée à l'aide de
scripts sur le serveur qui vous héberge puis renvoyée
dans la plupart des cas sur l'adresse électronique de votre choix.
La balise <FORM>
vient en début de votre formulaire, (la balise </FORM>
ferme votre formulaire) elle possède 3 attributs.
ACTION : Adresse le
formulaire vers l'URL (relative) du script CGI (fourni par le serveur
qui héberge vos pages), qui accepte l'information et vous le
retourne suivant les paramètres définis. Les valeurs
les plus souvent couramment utilisées sont :
"mailto:webmaster@allhtml.com"
: Pour l'envoi du formulaire par le logiciel de messagerie de votre
visiteur. Attention cette valeur peut poser problème avec
certains navigateurs notamment I.Explorer 3.0
"/cgi-bin/mailer"
: Pour l'envoi du formulaire par le script CGI de votre hébergeur.
METHOD : 2
valeurs sont proposées
POST : Pour un
formulaire classique.
GET : Pour, par
exemple définir un moteur de recherche sur votre site.
ENCTYPE : Cet
attribut spécifie le format des données envoyées
dans le cas où un protocole n'imposerait pas un format
précis. Il possède plusieurs valeurs dont :
"text/plain"
: Valeur utilisée dans le cas d'un formulaire classique.
"multipart/form-data"
: Valeur utilisée dans le cas où le formulaire
comprendrait un fichier attaché (<INPUT
TYPE="file" ...>).
Exemple pour le serveur
d'hébergement Multimania.
<FORM
METHOD=GET ACTION="/cgi-bin/mailer">
Exemple pour un
formulaire classique sans l'aide de script CGI.
C'est la balise
<TEXTAREA> qui est utilisée pour réaliser une
boîte de texte multiligne. Cette balise est surtout choisie
pour permettre aux visiteurs de votre site de laisser un commentaire
ou de taper un texte quelconque.
Ses attributs sont :
NAME : Définit le
nom de la donnée (obligatoire).
ROWS : Définit
le nombre de lignes dans la boîte de saisie.
COLS : Définit
le nombre de colonnes (en caractères) dans la boîte de saisie.
READONLY :
Spécifie que la boîte multiligne est en mode lecture seulement.
A noter que si du texte se
trouve à l'intérieur des balises <TEXTAREA> et
</TEXTAREA> il va alors apparaître comme texte par défaut.
La balise <SELECT>
présente une liste de propositions soit sous forme de liste
déroulante (1 seul choix possible), soit sous forme de menu
(plusieurs choix possibles), elle doit être couplée avec
la balise <OPTION> pour définir les choix.
Voici ses attributs :
NAME : Définit le
nom de la donnée (obligatoire).
SIZE : S'il a comme
valeur 1(valeur par défaut), c'est une liste déroulante
si SIZE supérieur à 1 c'est une liste de choix avec une
barre de défilement.
MULTIPLE : Ce choix est
valable uniquement si SIZE est supérieur à 1.
La balise <OPTION>
comporte deux attributs :
VALUE : Nom de la
donnée pour le choix.
SELECT : S'il est
présent dans la balise <OPTION> le choix est alors
reconnu comme choix par défaut.
Exemple d'une liste
déroulante et son code source.
La Balise <INPUT> que
l'on a vu au-dessus permet aussi de représenter une liste de
cases à cocher (plusieurs choix possibles) ou une liste dite
"bouton radio" (1 seul choix possible), il suffit pour cela
de lui spécifier l'attribut TYPE="checkbox" (cases
à cocher) ou TYPE="radio" (bouton radio). Les autres
attributs sont les suivants :
NAME : Définit le
nom de la donnée (obligatoire).
VALUE : Nom de la
donnée pour le choix.
CHECKED : S'il est
présent dans la balise <INPUT>, le bouton sera
coché par défaut.
Exemple d'une liste de
cases à cocher et son code source.
Cette liste se positionne
verticalement du fait que la balise <BR> a été
insérée après chaque choix.
<INPUT
TYPE="checkbox" NAME="CHOIX" VALUE="CASE
1"> CASE 1<BR> <INPUT
TYPE="checkbox" NAME="CHOIX" VALUE="CASE
2"> CASE 2<BR> <INPUT
TYPE="checkbox" NAME="CHOIX" VALUE="CASE
3"> CASE 3<BR>
Exemple d'une liste
à boutons radio et son code source.
A noter que le choix 3 est
coché par défaut.
Lors d'un envoi de
formulaire, vous pouvez proposer au visiteur de vous faire parvenir
un fichier attaché (ou pièce jointe), il suffit pour
cela d'indiquer la valeur file à l'attribut TYPE.
La soumission (envoyer) ou
la remise à zéro (recommencer) d'un formulaire se fait
une fois de plus avec la balise <INPUT> TYPE ayant ici deux
autres valeurs :
SUBMIT : Envoi le
formulaire vers le serveur.
RESET : Remet à
zéro les choix du formulaire.
Les légendes
inscrites sur les boutons peuvent être modifiées avec
l'attribut VALUE.
Vous pouvez créer
votre propre bouton d'envoi et de remise à zéro, ce qui
mettra une touche personnelle à votre formulaire.
Pour obtenir un bouton
personnalisé de remise à zéro (reset), il suffit
tout simplement d'encadrer l'image de votre bouton (avec la balise
<IMG> ex : <IMG SRC=" bouton.gif">) entre les
balises <A HREF="votrepageformulaire.htm"> et
</A> ce qui aura pour effet de recharger votre page html de
formulaire et donc d'annuler tous les choix du visiteur.
Exemple d'un bouton
"reset" personnalisé et son code source.
Si vous souhaitez envoyer
certaines données au script du serveur chargé de
traiter votre formulaire, vous devez utiliser la balise <INPUT>
avec l'attribut TYPE="hidden". Prenez contact avec le
service qui vous héberge afin d'obtenir les différentes
valeurs à indiquer avec la balise <INPUT>
Exemple avec le script
CGI mailer qui s'occupe de traiter les formulaires sur Multimania.
Il y a mille et une
façons de concevoir un formulaire, mais sachez avant tout que
plus il sera clair et lisible, plus il sera complété
par vos visiteurs. Pour cela vous pouvez opter pour des tableaux, des
listes à puces, (pour les cases à cocher notamment),
des listes de définition, et bien sur des balises de
formatages et d'alignements de texte.