Les formulaires permettent de créer un
contact simple avec vos visiteurs. Ils peuvent être composés
de plusieurs types de champs à remplir (textes, cases à cocher,
boutons radio...). Nous allons donc les voir un par un pour que
vous puissiez faire un formulaire adapté à vos besoins...
Le cours peut paraître long mais sachez que c'est juste bien aérer
:), vous ne lirez peut être pas tout mais essayez de lire le maximum pour
bien comprendre le principe de fonctionnement.
Petit détail : il est possible que certains exemples fournies ne fonctionnent
pas sur votre navigateur... En effet, à force de mettre des bouts de code de
formulaire par ci par là certains navigateurs perdent les pédales et ne réagissent
plus correctement... Soyez prévénu et ne m'en voulez pas (chez moi tout marche
bien :) ...) !
Déclarer un formulaire :
Les formulaires ont tous un point en commun : ils doivent être "déclarer"...
Cette déclaration a une utilité majeure : dire à partir
de quand comment le formulaire et quand il finit mais également vers quelle
adresse e-mail le résultat du formulaire doit être envoyé.
Pour déclarer un formulaire, on utilise la balise <FORM> (l'abrégé de
formulaire) en y ajoutant un certain nombre d'attributs.
Pour vous simplifier la tache je vais vous fournir la configuration habituelle
de la balise <FORM>, celle que vous recopierez quasiment à l'identique
:
<FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com" ENCTYPE="TEXT/PLAIN">
Ici seront insérés les différents champs à remplir
que nous verrons dans le prochain paragraphe... Patience... </FORM>
Décryptons une fois de plus ensemble un nouveau code HTML barbare mais
tellement utile :
- FORM : signifie donc, comme nous l'avons vu précedemment,
qu'ici débute le formulaire...
- METHOD="post" : cela indique la "méthode
d'envoi"... Retenez juste que la méthode utilisée
le plus fréquemment est "post" (sans E surtout
!!!) pour l'envoi de données par mail.
- ACTION="mailto:votrepseudo@votreprovider.com" :
indique au navigateur quelle action celui-ci doit effectuer.
Ici, il doit envoyer un mail (mailto:) contenant les résultats
du formulaire à votrepseudo@votreprovider.com (à remplacer
par votre e-mail bien évidemment)...
- ENCTYPE="TEXT/PLAIN" : un petit attribut
qui a de l'importance : le type d'encodage (ENCTYPE) ! Ici
on demande TEXT/PLAIN ce qui veut dire d'envoyer les résultats
du formulaire en format texte dans le corps du mail (comme
quand vous écrivez un message classique).
Sans cet attribut, le navigateur insérerait les résultats du formulaire
dans un fichier attaché à un mail vide (vous pouvez tester si ça
vous interesse) ! C'est un peu génant et stupide de recevoir un mail vide
avec un fichier attaché (que l'on devra ouvrir avec le bloc notes de Windows
pour le lire) alors on gardera en tête TEXT/PLAIN sans parler des autres
options pour le moment...
- </FORM> : Très important !!! Après
les champs de saisie, quand votre formulaire est fini : fermez
le !
Des champs pour les textes :
Maintenant que nous savons comment déclarer notre formulaire, il nous
faut insérer des champs à l'intérieur de celui-ci, c'est à dire
des espaces vides de texte que l'utilisateur devra remplir ou des cases à cocher,
etc... En effet, si on veut recevoir une réponse il faut peut être
au moins poser une question n'est ce pas ?
Le champ le plus connu est le champ de texte... Il peut prendre deux formes principales
:
Les champs ligne
simple
Les champs multi-lignes
Les champs ligne simple :
Nous allons volontairement mettre le maximum d'attributs dans la balise du champ
de ligne simple afin que vous soyez au courant de tout :
Pour mieux comprendre, voyons comment ce code est composé :
- INPUT : on indique au navigateur qu'on insére un champ (INPUT=entrée
de données en anglais).
- TYPE="text" : (attribut obligatoire) le type de données
demandées sera du texte (sans E surtout, on parle anglais !!!).
- NAME="XXX" : (obligatoire) Complétement invisible aux
visiteurs, cet attribut vous sera très utile. En effet, quand vous recevrez
par mail la réponse à votre formulaire ce que vous écrirez
dans NAME="blablabla" sera inséré avant la réponse
de votre visiteur.
Exemple : Si le visiteur inscrit Benjamin dans le champ
texte et envoie le formulaire, vous recevrez un mail avec :
son nom:Benjamin si vous avez mis comme attribut NAME="son
nom"... Vous comprenez l'utilité de ce NAME ? Noubliez
pas de l'utiliser afin de savoir à quelle question répondait
le visiteur sans avoir à regarder sur votre site (surtout
si vous posez une dizaine de questions ou plus !).
- SIZE="25" : (optionnel) SIZE signifie "taille" en
anglais. C'est en fait la taille en caractère de votre champ... Exemple : un champ de texte de SIZE="5" donnera
ce résultat :
alors qu'un champ de SIZE="25" donnera ceci :
!
- MAXLENGTH="50" : (optionnel) cet attribut définie combien
de caractère l'utilisateur pourra inscrire dans le champ... Si vous ne
le définissez le nombre de caractère sera illimitée ce qui
peut être parfois génant... Faites attention en réduisant
le nombre de caractères pour le nom ou prénom : n'oubliez pas les
longs prénoms composés... Exemple : essayez d'écrire du texte dans ce champ
de MAXLENGTH="3"
et maintenant dans celui-ci de MAXLENGTH="20"
.
- VALUE="Entrez ici votre nom" : (optionnel) Grâce à cet
attribut vous pouvez définir un texte inscrit par défaut dans le
champ ! Si vous n'utilisez pas cet attribut le champ sera vide... Exemple : un champ sans VALUE :
et un champ avec VALUE="Entrez votre nom"
.
Les champs multi-lignes :
Les champs multi-lignes se présentent ainsi (avec le maximum d'attributs
utiles) :
- TEXTAREA : (obligatoire) on indique au navigateur
qu'on insére un champ multi-lignes (TEXTAREA=Champ de
texte).
- NAME="son adresse" : (obligatoire) même utilité que
pour les champs de ligne simple ci-dessus.
- ROWS="3" : (optionnel) Indique le nombre
de lignes du champs. Si vous ne l'indiquez pas le champ fera
2 lignes. Exemple : voici un champ de ROWS="3"
et un champ de ROWS="5"
- COLS="25" : (optionnel) Indique le nombre de "colonnes" du
champ, en fait le nombre de caractères que l'on peut insérer sur
une ligne. Si vous ne l'indiquez pas le champ fera 20 "colonnes".
- WRAP="PHYSICAL" : (très optionnel)
Indique quel type de retour à la ligne devra être
appliqué au champ de texte... Sans cet attribut le passage à la
ligne se fera automatiquement. Mais vous pourrez utiliser cet
attribut pour supprimer le passage à la ligne (WRAP="OFF"),
passer à la ligne du coté du visiteur mais recevoir
la réponse sur une ligne (WRAP="VIRTUAL")
ou passer à la ligne automatiquement coté utilisateur
et du mail que vous recevrez (WRAP="PHYSICAL") ce
que je conseille.
- </TEXTAREA> : (obligatoire) N'oubliez pas de
fermer le champ de textes multi-lignes avec ce code ! Si vous écrivez
du texte juste avant cette fermeture celui-ci sera affiché dans
le champ (comme pour l'option VALUE du champ ligne simple)...
Bouton d'envoi du formulaire.
Vous avez déclaré un formulaire, vous savez comment y ajouter des
champs à remplir mais... mais... Vous ne savez pas comment permettre à l'utilisateur
de d'envoyer le formulaire rempli !!!
C'est simple, il suffit d'inscrire la balise :
<INPUT TYPE="submit" NAME="Submit" VALUE="A répondu à mon
formulaire">
Cette balise contient les ordres suivant :
- INPUT : on indique au navigateur qu'on insére un "champ" (oui
un champ de données pour un bouton ça peut paraitre byzarre, il faut le prendre
dans le sens où l'utilisateur peut cliquer ou ne pas cliquer... Donc entrer
une donnée ou non).
- TYPE="submit" : (obligatoire) Indique que
le type de données est en fait un "submit" c'est à dire
une soumission d'information...
- NAME="A répondu à mon formulaire" :
(obligatoire) nous l'avons vu précedemment, vous recevrez
le mot entre guillemets dans votre mail... Ici vous recevrez "A
répondu à mon formulaire"... Bon peu
d'interêt pour un formulaire mais on peut considérer ça
comme le "A voter !" des élections ! C'est
comme ça et pas autrement ! Par contre, dans le cas
où vous avez plusieurs formulaires quasi-identiques
sur votre site cela permettra de les différencier en
notant par exemple : NAME="A répondu à mon
formulaire d'inscription" ou NAME="A répondu à mon
formulaire de renseignement".
- VALUE="Envoyer" : (obligatoire) Ici vous
insérez le mot qui s'affichera sur le bouton (que vous
recevrez également par mail après le NAME)...
Exemple d'une VALUE="On peut tout mettre sur un bouton"
(n'essayez pas de cliquer sur ce bouton, il s'agit juste d'un exemple, il n'envoie
rien !)
Bravo, vous avez résisté et maintenant
vous savez faire un formulaire... Je suis conscient que c'est beaucoup
d'informations et nous allons tout de suite les mettre en pratique...
Vous allez créer une nouvelle page HTML que vous enregistrerez sous le
nom "formulaire.html" (je ne vous fais pas l'affront de vous re-expliquer
comment) avec un formulaire pour votre CV demandant la société,
le nom, prénom et adresse ainsi qu'un petit message de votre futur employeur
:))))... Vous pouvez regarder mon code ci-dessous pour vous aider mais ne copiez
pas tout, tentez des expériences vous ne risquez rien puisque tout arrivera
sur votre mail !
Si vous copiez mon code n'oubliez pas de remplacer
ACTION="mailto:votrepseudo@votreprovider.com" par
votre mail afin de recevoir les réponses de votre formulaire
!
Votre société : <input type="text" name="Nom
de la société" size="25">
<br> <br>
Votre prénom : <input type="text" name="Prénom
du contact" size="25">
<br> <br>
Votre nom : <input type="text" name="Nom du contact" size="25">
<br> <br> <br>
Votre adresse : <textarea name="Adresse de la société" cols="35" rows="4"></textarea>
<br> <br>
Votre message : <textarea name="Message du contact" cols="35" rows="5" wrap="VIRTUAL">Merci
de me laisser la description du poste proposé.</textarea>
<br> <br>
<input type="submit" name="A répondu à mon formulaire" value="Envoyer
le formulaire">
</FORM>
</BODY>
</HTML>
Si vous cliquez sur le bouton "envoyer le
formulaire" que vous avez fait, n'oubliez pas d'envoyer le
mail de réponse au formulaire par la suite (en effet le
formulaire utilise votre boîte mail pour s'envoyer au destinataire)
puis, moins d'une minute plus tard, rapatriez vos mails afin de
recevoir votre mail...
Cliquez
ici pour voir le résultat de ma page de formulaire...
Bien évidemment n'essayez pas d'envoyer le formulaire
car l'adresse mail est mauvaise et vous recevriez un message
d'erreur quelques minutes plus tard.
Soignez l'apparence de votre formulaire : Maintenant
que vous avez réussi un formulaire, essayez de soigner
la présentation afin d'obtenir un résultat plus
correct visuellement. Faites, par exemple, un tableau à deux
colonnes et insérez vos textes dans la première
et vos champs dans la deuxième... Jouez ensuite sur
les alignements afin de tout caler correctement... N'oubliez
pas de laisser tout ce tableau encadré par les balises <FORM
METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com" ENCTYPE="TEXT/PLAIN"> et </FORM> !
Volontairement je ne le ferais pas dans les exercices afin de ne pas alourdir
les exemples de code source que je vous fournis et de ne pas embrouiller les
plus réticents au HTML ! Mais, pour information, le résultat pourrait être celui-ci (avec
une bordure sur le tableau pour que vous puissiez mieux voir l'astuce et faire
mieux que moi).
Des listes déroulantes
:
Imaginons que nous souhaitons maintenant proposer au visiteur de nous indiquer
s'il est un "Monsieur", ou une "Madame", ou pourquoi pas
une "Mademoiselle" :) (quoique la parité dans le monde du travail
c'est pas encore ça malheureusement mais bon c'est une autre histoire
et un jour peut être...). Nous pourrions bien évidemment lui fournir
un champ texte classique mais nous préférons lui offrir rapidement
le choix et lui éviter de taper du texte.
Nous utiliserons alors une liste déroulante dont le code est simple :
Ici nous définissons plusieurs points :
- <SELECT> et </SELECT> : (obligatoire et très important)
indique au navigateur que l'on propose une liste de sélections et la fin
de cette liste.
- NAME="genre" : (obligatoire) comme pour
les champs de textes, cela servira d'information pour nous...
- SIZE="1" : (obligatoire) indique la taille
visible de la liste en ligne... Exemple : SIZE="3" aurait donné
- <OPTION>Madame</OPTION> : (obligatoire)
sert à définir les différents choix offerts
aux visiteurs (ici madame s'affichera)...
- VALUE="Madame" : (obligatoire) c'est la
valeur invisible que vous recevrez par mail si le visiteur
a choisi l'OPTION correspondante...
- selected : (optionnel) vous ne l'aviez peut être
pas vu mais j'ai rajouté un "selected" juste
après VALUE="Madame". Ce "selected" permet
de définir une option qui sera selectionné par
défaut !
Un autre attribut aurait pu être ajouté mais ici il n'est pas utile...
Pour infomation, voici cet attribut :
Ici j'ai utilisé l'attribut "multiple" dans le code <select
name="fruits" size="4" multiple> et ainsi vous pouvez
choisir plusieurs fruits (attention cela ne marche pas sur tous les navigateurs).
Des boutons radios :
Il est parfois intéressant d'utiliser des boutons radios pour offrir un
choix unique (un seul bouton peut être choisi) et rapide à votre
visiteur.
Le code pour faire des boutons radios est très simple :
Evidemment vous devrez insérer un texte avant le bouton radio pour expliquer
quelle est l'option choisie en cliquant dessus.
Exemple :
Demande de contact téléphonique
Demande d'entretien
Le code important pour définir un bouton radio est TYPE="radio".
Les attributs du bouton radio (NAME et VALUE) sont les même que pour les
autres champs.
Des cases à cocher :
Pour des choix tout aussi rapide mais multiples (pas de limitation de cases à cocher),
il y a les boutons radios dont le code est aussi simple :
<INPUT TYPE="checkbox" NAME="Case coché" VALUE="Création
de site">
Vous devrez insérer également un texte avant la case pour expliquer
l'option choisie par le visiteur.
Exemple :
Nous souhaitons concevoir un site
Nous souhaitons créer un CD Rom
Pour tester ces nouveaux champs rajoutez à votre
formulaire des cases à cocher et des boutons radios ! Attention
n'oubliez pas de définir des NAME et des VALUE ! Si vous
ne définissez pas correctement ces attributs vous ne saurez
pas quelles options a selectionné votre visiteur. Enfin
mettez un lien allant de votre page de C.V. vers ce formulaire
(pour ceux qui ne savent plus comment rendez vous au cours sur
les liens !)
Plus que jamais : faites des tests et envoyez vous des formulaires ! Voici
un exemple de ce que vous pourriez obtenir.
Testez ! Testez ! Et surtout vérifiez vos
NAME et VALUE. J'insiste lourdement mais il est toujours dommage
de recevoir le résultat d'un formulaire incompréhensible
dans son mail... De plus, fournissez toujours à votre visiteur
votre adresse mail en dessous du formulaire au cas où son
navigateur le gérerait mal (Netscape par exemple) ou qu'il
souhaite vous envoyer un message plus "personnel" et
plus complet !
Insérer un formulaire commence toujours
par le placement de :
<FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com" ENCTYPE="TEXT/PLAIN">
Ici vos champs de choix.
</FORM>
Les différents champs (à mettre entre
les balises <FORM> et </FORM> sont (par exemple)
:
