Matriser le

langage HTML
Les Formulaires
L'interactivit
Un site web au dpart est fait pour lire et
obtenir des informations.

On remarque ainsi que le site manque de

mouvements, on peut donc ajouter des
ingrdients qui demande l internaute d agir.

Ces ingrdients sappellent : Les Formulaires

Avec les formulaires, Html vous ouvre les

portes de l'interactivit et vous permet de
recevoir des informations provenant
directement de votre lecteur et
ventuellement de lui rpondre directement.
L'interactivit
Votre site aura des lments des programmes
informatiques: cases cocher, boutons, zones
pour crire, listes droulantes, boutons
doptions

En gnral, par la suite, on clique sur un bouton "

Envoyer " , ce qui dclenche le traitement des
donnes que lutilisateur a entres, et leur
envoie sur le site, sur votre courrier lectronique,
voil en gros quoi consiste un formulaire.
L'interactivit
les donnes rcupres dans un formulaire
d'une page web peuvent tre traites de
nombreuses faon suivant ce que l'on souhaite
faire.

Quelques exemples, pour vous montrer leur

utilit:
Un questionnaire sur linternaute, ses
habitudes et ce qui lui plait ou pas sur
votre site
Un vote pour un jeu, une ide, un site
Une commande sur un site de vente.
Dfinition d'un
formulaire
Avant de pouvoir utiliser les diffrentes sortes de
formulaires (ligne de texte, liste droulante, cases
cocher, etc.), il faut dclarer au browser qu'il devra
grer des formulaires et ce qu'il devra en faire.

<FORMmethod="post" action="URL d'expdition"

enctype="text/plain">
... les formulaires proprement dit ...
</FORM>

L'attribut "method" vous offre le choix

entregetetpost. La diffrence entre ces deux
mthodes repose sur la faon dont les donnes
seront transmises au serveur et exploites par celui-
ci. Avec le temps, la mthode post s'est impose car
elle apparat plus efficaceet permet le traitement
d'une quantit plus importante de donnes.
Dfinition d'un
formulaire
L'attribut "action" spcifie l'adresse d'expdition des
donnes.
Dans le cas d'un envoie vers une autre page de
traitement des donnes, on spcifie ladresse de la
page.
<FORM method="post" action="http://adressePage">

Dans le cas d'un envoi vers en adresse

lectronique (email), on utilise le protocole mailto:
suivi de l'adresse lectronique de destinataire
(gnralement votre adresse email).

<FORMmethod="post"action="mailto:nom.prenom@ensas.
ma">
(sans espace entre mailto:et l'adresse email !)
Dfinition d'un
formulaire
L'attribut "enctype" (optionnel) spcifie
l'encodage utilis pour le contenu du
formulaire. Ce paramtre ne peut tre utilis
qu'accompagn par la mthode post. Ainsi
enctype="text/plain" encode le contenu du
formulaire en format texte lisible par le
destinataire. Cette option est particulirement
adapte l'action du type mailto.
Dfinition d'un
formulaire
Il n'est pas inutile de prvoir l'attribut
name="nom" si la page comporte plusieurs
formulaires.

Attention !!! emport par votre impatience

encoder les formulaires, vous allez oublier la
balise de fin </FORM>. Dans ce cas, la
visualisation dans le navigateur, rien ne sera
affich.
Ligne de texte
INPUT type="text" indique un champ de saisie
d'uneseuleligne. C'est assurment le formulaire
le plus simple mettre en oeuvre :

<FORM>
<INPUT type="text" name="nom" size="50">
</FORM>

L'attribut name="nom du formulaire" est

quasiment obligatoire car on n'utilise que
rarement un seul formulaire. Le nom va identifier
la chane de caractres du champ de saisie. De
faon schmatique, nom = (ce qui est introduit
dans la ligne de texte).
Ligne de texte
L'attribut size (optionnel) dfinit la longueur
du champ de saisie. Notons que l'on peut
introduire un nombre de caractres plus
lev que celui de la longueur.

Il existe l'attribut maxlength="x"

(optionnel) qui limite le nombre rel de
caractres que l'on peut introduire dans le
champ de saisie.

La balise <INPUT> n'a pas de balise de fin.

Zone de saisie
La balise <TEXTAREA></TEXTAREA> introduit
une zone de texte multilignes et non plus une
simple ligne de texte. La syntaxe est :

<FORM>
<TEXTAREA name="nom" rows=4
cols=40>Valeur par
dfaut</TEXTAREA>
</FORM>

L'attribut name permet de donner un nom au

formulaire.
Zone de saisie
L'attribut rows=x dtermine le nombre de
lignes de la zone de texte.

L'attribut cols=y dtermine le nombre de

caractres visibles sur chaque ligne ou si
vous prfrez le nombre de colonnes.

Attention !!!La balise <TEXTAREA> a une

balise de fin, soit </TEXTAREA>.
Liste droulante
La balise <SELECT></SELECT> indique au
browser l'usage d'une liste droulante. Les
lments de la liste sont introduits par la
balise <OPTION> ... (</OPTION> facultatif).

<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
Liste droulante
Si vous cliquez sur la petite flche vers le bas, vous
obtiendrez la liste droulante o on retrouve les
lments de la liste (<OPTION>).

L'attribut name="nom" dfinit le nom du formulaire.

L'attribut size="x" dtermine le nombre d'lments

de liste affich dans la boite d'entre. En fait,
size="1" est optionnel car "1" est la valeur par
dfaut. Le mme exemple avec size="3" donne :
Liste droulante
On peut prslectionner l'lment affich dans la boite
d'entre (par dfaut, le premier lment de la liste
sera retenu). On utilise pour ce faire l'attribut selected
de la balise <OPTION>. Pour faire afficher d'entre
mercredi au lieu de lundi notre exemple devient :
<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION selected> mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
La balise <SELECT> a un balise de fin </SELECT>
tandis que le balise de fin </OPTION> est facultative.
Bouton d'option
Il serait plus logique de parler de boutons d'option car ils
n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un
groupe de boutons d'options. Les boutons d'option, aussi
appels boutons radio, ont comme particularit qu'une
seule option la fois peut tre active (le "ou" exclusif).
La syntaxe de base est :

<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du
bouton">
</FORM>

Ainsi, si on propose un choix entre, ou le tarif de jour ou

le tarif de nuit ou le tarif de week-end, l'exemple devient
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de
week-end
</FORM>
Bouton d'option
Vous avez compris que l'attribut name="nom" doit
avoir le mme nom pour tout le groupe de boutons
d'option.
L'attribut "checked" (optionnel) permet de
prslectionner un bouton radio. Ainsi
<INPUT type= "radio" name="tarif" value="jour"
checked> tarif de jour
prsenterait le bouton radio "tarif de jour" en position
prslectionne.

Le contenu de l'attribut "value" du bouton retenu sera renvoy par

mailto ou utilis par le Javascript.
La balise <INPUT> n'a pas de balise de fin.
Pour la petite histoire le terme radio ferait rfrence aux anciens
postes de radio sur lesquels le fait d'appuyer sur un bouton dsactivait
le bouton prcdemment enfonc.
Case cocher
La philosophie des cases cocher [checkbox] est assez similaire aux boites
d'option. Ici, cependant, plusieurs choix simultans peuvent tre raliss. La
syntaxe de base est :

<FORM>
<INPUT type="checkbox" name="nom" value="valeur attache au
bouton">
</FORM>
Comme exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace
vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat
chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
Case cocher
Les rgles pour l'attribut name="nom" sont moins prcises que pour
les boutons d'option. Vous pouvez employer des noms identiques ou
des noms diffrents pour chaque case cocher. Cependant des noms
diffrents sont ncessaires pour l'utilisation d'un script.
L'attribut checked (optionnel) permet de prslectionner une case
cocher. Ainsi
<INPUT type="checkbox" name="choix1" value="1" checked
> glace vanille
prsenterait la case cocher "glace vanille" en position prslectionne.

Le contenu de l'attribut "value" du ou des boutons retenus seront

renvoys par mailto ou utilis par le Javascript.
La balise <INPUT> n'a pas de balise de fin.
Bouton de commande
Avec l'introduction des langages de scripts (Javascript et VBscript)
l'usage du bouton de commande prsente un intrt certain.
Simplement titre d'illustration ou pour vous donner envie d'en
savoir plus sur le Javascript, je vous propose d'en dcouvrir la
syntaxe :
<FORM>
<INPUT type="button" name="nom" value="texte du bouton"
onclick="fonction Javascript">
</FORM>
Voyons un petit exemple.
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test"
onclick="alert('Test russi !')">
</FORM>

En cliquant sur le bouton "Bouton de test", on va dclencher une

fonction Javascript lmentaire [mon cher Watson] qui consiste
afficher une petite boite (dite d'alerte) avec le texte "Test russi!".
Bouton de commande
L'attribut "value" permet d'adapter le texte du bouton
vos souhaits.
Avec le bouton de commande, il n'est pas ncessaire
d'avertir le browser qu'on utilisera du Javascript par une
balise du genre <SCRIPT language="javascript">. En
effet, le navigateur (compatible Javascript) reconnat par
dfaut les fonctions en Javascript. Par contre, si vous
utilisez du VBscript, il faudra utiliser l'encodage
<INPUT type="button" name="test" value="Pour un test"
language="VBscript" OnClick="MsgBox 'Test russi!'">
Submit et Reset
1. Submit
Le bouton Submit a la tche spcifique de transmettre toutes les informations
contenues dans le formulaire l'URL dsigne dans les attributs ACTION et
METHOD du tag <FORM>. La syntaxe Html est :

<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>

Les modifications seront peu nombreuses car le bouton Submit a une

fonction Html trs spcifique. Seul le texte du bouton pourra tre modifi
(par dfaut Submit).

La balise <INPUT> n'a pas de balise de fin.

Submit et Reset
2. Reset
Le bouton Reset permet d'annuler les modifications
apportes aux contrles d'un formulaire et de
restaurer les valeurs par dfaut. La syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du
bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
Les modifications seront peu nombreuses car le
bouton Reset a une fonction Html trs spcifique.
Seul le texte du bouton pourra tre modifi (par
dfaut Reset).
La balise <INPUT> n'a pas de balise de fin.
Exercice
Proposer le code HTML qui permet la
prsentation du formulaire ci-aprs :
Correction
<HTML>
<FORM METHOD="POST" ACTION="">
<p>
<h4><CENTER>Essai Formulaire </CENTER></H4>
<pre><b>
<LI>NOM: <input type="text name="name" size=30>
<LI>ADRESSE: <input type="text" name="street.address" size=30>
<LI>VILLE<input type="text" name="city" size=30>
<LI>PROVINCE: <input type="text" size=15 name="state">
<LI>CODE POSTAL: <input type="text" name="zip" size=10>
<LI>PAYS:<input type="text" name="country" size=20>
<LI>TELEPHONE: <input type="text" name="phone" size=10>
<LI>COURRIER ELECTRONIQUE: <input type="text" name="email"
size=30>
</b></pre>
<input type="submit" value="Soumettre"> <input type="reset"
value="Effacer et
recommencer"><P>
</form><p>
</BODY>
</HTML>