Si vous souhaitez offrir des services aux
visiteurs impliquant un échange d'informations sur votre site,
l'idéal est de créer un formulaire. Le contact e-mail traditionnel
restera réservé au courrier type avec liberté d'écrire
ce que l'on y veut. Le formulaire quant à lui permet de poser des
questions précises auxquelles les visiteurs répondront dans
les cases blanches. Nous allons voir un exemple très simple, puis
l'analyser pour vous apprendre à en créer vous-même
et paramétrer selon ce que vous désirez demander à
vos visiteurs. Vous allez voir, il y a quelques règles importants
à respecter.
Voici en
exemple le code html d'un formulaire que j'ai créé pour
le site d'un ami qui propose un service de voyance:
<form method="post"
action="mailto:votreadresse@votrefournisseur">
<input type="hidden" name="recipient" value="votreadresse@votrefournisseur">
<p>Qui êtes-vous ?</p>
<p>Votre Prénom : <input name="prenom" type="text"
size="20" maxlength="30"></p>
<p>Votre date de naissance : <input name="date" type="text"
size="20" maxlength="30"></p>
<p>Votre profession : <input name="profession" type="text"
size="20" maxlength="30"></p>
<p>Prénom , date de naissance et profession des personnes
concernées par la question , dans l'ordre donné
merci : <input name="prenom date profession personnes concernees"
type="text" size="80" maxlength="120"></p>
<p>Votre question : <input name="votre question" type="text"
size="80" maxlength="400"></p>
<p>Votre e-mail : <input name="votre e mail" type="text"
size="30" maxlength="60"></p>
<p>Merci !
<input type="submit" value="Valider">
<input type="reset" value="Recommencer">
</form>
Voici
maintenant à quoi ressemble ce même formulaire sur le site
( par contre j'ai configuré avec ma propre adresse webmaster@valordi.com
pour cette page de VALORDI):
ANALYSE
générale:que peut-on trouver dans un formulaire?
Qui
dit formulaire dit dialogue.
Un
formulaire est contenu entre les balises <form> et </form>
qui renferme en outre des attributs spécifiant où
et comment envoyer les informations saisies par l'utilisateur.
Les balises sont toujours en anglais.
Voici les principales
balises que l'on peut trouver à l'intérieur de ce
formulaire (balise <form>...</form>) :
<input>
indique la façon dont l'utilisateur fournira ses informations.
Cette balise a de nombreux attributs.
<button>...</button>
permet de créer des contrôles. On l'utilise surtout
pour ajouter des images de boutons accompagnées d'un texte
de remplacement.
<textarea>...</textarea>
signale la présence d'une zone d'entrée d'un texte
de remplacement.
<select>...</select>
indique la présence d'un groupe de choix possibles parmi
lesquels l'utilisateur devra faire une sélection.
<submit>
et <reset> sont 2 boutons par lesquels l'utilisateur va
valider et transmettre le formulaire ou annuler et réinitialiser
les informations qu'il vient de saisir.
Plusieurs façons
de dialoguer avec l'utilisateur:
Zones d'entrée
par lesquelles il peut taper ce qu'il veut sur une ou plusieurs
lignes.
Menus déroulants
dans lesquels il doit choisir un élément parmi des
choix proposés.
Boutons personnalisés,
graphiques ou non.
Cases à
cocher permettant de valider une ou plusieurs options.
Boutons radio
permettant de choisir de façon exclusive une option parmi
plusieurs.
Entreée
des informations: la balise <input>: Elle demande 2 attributs
minimum: type (type d'élément affiché
dans le formulaire) et name (donne un nom au champ d'entrée
qui correspond au type, afin de renvoyer des chaînes de caractères
sous forme de couple nom=valeur).
L'attribut type
et ses valeurs possibles:
button:
bouton à usage général qui peut appeler un
script local au clic.
checkbox:
case à cocher, proposant le choix entre plusieurs valeurs
proposées.
file:
l'utilisateur peut télécharger un fichier vers le
serveur. Il faut cependant spécifier les types de fichiers
grâce à l'attribut accept.
hidden:
invisible à l'écran.
image:
pour inclure une image parmi les objets d'une sélection.
password:
même chose que text, à la différence
que la frappe sera affichée sous forme d'astérisques,
mais la valeur sera transmise en clair au serveur.
radio:
bouton radio qui permet des choix mutuellement exclusifs.
reset
et submit: voir ci-dessus.
text:
boite de saisie d'une ligne dans laquelle on peut écrire
librement. Pour les longs messages, on utilisera <textearea>
Analyse
du script présenté:
Toujours
ouvrir avec un "< "et fermer avec un" >"
Une
balise s'ouvre de cette façon: <balise> et se ferme
de cette façon </balise>,surtout ne pas oublier le
slash dans le code de fermeture (/). On met le code à l'intérieur
de la balise.
Début
du formulaire par <form> ou <form ...> et fin du formulaire
par </form>
<form
method="post" action="mailto:votreadresse@votrefournisseur">
remplissez avec votre adresse e-mail
de réception. "Form
method" indique la méthode choisie d'envoi. Ici, il
s'agit d'un "mailto", donc envoi par mail.
<input
type="hidden" name="recipient" value="votreadresse@votrefournisseur">
"hidden name" = nom caché.
Pas indispensable mais bon à mettre. Hidden n'affiche rien
sur l'écran, mais c'est par ce moyen que le formulaire
peut renvoyer au serveur des informations sans que l'utilisateur
en sache rien.
<p>Qui
êtes-vous ?</p> Ceci signifie:
"Qui êtes-vous?" Drôle de façon d'écrire,
allez-vous me dire! eh oui, l'html est bien un langage à
part entière, et il ne supporte pas les accents et caractères
spéciaux, donc il faut les écrire d'une autre façon.
Voici les principaux codes pour ces caractères spéciaux:
et
pour le <p> et </p>, cela signifie qu'il s'agit
s'une ligne.
<p>Votre
Prénom : <input name="prenom" type="text"
size="20" maxlength="30"></p> =
<inputname=".....">
signifie ce que vous écrivez de manière apparente
sur votre site. "text" size="20"
définit le nombre maximal de caractères pouvant
être contenus dans un élément sans entraîner
le défilement de la fenêtre de saisie."maxlength"="30"
définit le nombre maximal de caractères pouvant
être placés dans un élément "text".
Ces valeurs sont donc complètement variables selon ce que
vous désirez que les utilisateurs écrivent. Pour
leur offrir la possibilité d'écrire un long texte,
il faut mettre le "maxlength" relativement élevé
par exemple.
<input
type="submit" value="Valider"> =
il s'agit du bouton "valider"
<input
type="reset" value="Recommencer"> =
il s'agit du bouton "recommencer", c'est-à-dire
effacer les données saisies pour refaire.
Voilà,
vous avez de quoi faire avec tout ça votre propre formulaire
en fonction de ce que vous voulez poser comme questions à
vos visiteurs...et de ce que vous voulez comme réponses...
La
lecture de votre formulaire quand vous le recevez chez vous...
En
voilà une autre affaire!...car quand vous allez recevoir
votre mail, vous allez voir une pièce jointe en..."POSTDATA.ATT"!!!...
comment l'ouvrir?
Hé
oui! normal!...le format "postdata.att" est lisible par
n'importe quel logiciel de texte style wordpad ou autre...ça
c'est une chose...une autre est de le comprendre! voilà la
solution: téléchargez ce petit logiciel gratuitement,
il vous permettra de "traduire" très facilement
les résultats obtenus, et ainsi de pouvoir répondre
très facilement à vos utilisateurs!
CD - © copyright 2003-2005 webmaster@valordi.com