Exercices HTML

www.rahmouni.ma

Formulaires
Thme
Ralisation de formulaires HTML. Mais l'objectif n'est ici pas d'apprendre raliser le script CGI ou le programme PHP ou ASP qui, cot serveur Web, prendra en charge les donnes envoyes par ce formulaire (pour cela, voir le cours "Technologies Web" du soussign). Remarque : les formulaires HTML sont supports partir des versions de browsers Netscape 1 et IExplorer 1

Balises
Les lments de construction d'un formulaire Web (champs de saisie, boutons radio, cases cocher, menus droulants...) sont ce que l'on appelle communment, en programmation d'interfaces utilisateurs graphiques (GUI), des "widgets" (windows gadgets).

Dbut du formulaire :
<FORM METHOD=POST ACTION="URL script CGI" {TARGET="target name"} {ENCTYPE="type encodage"} >

(avec l'attribut TARGET, on peut dfinir le frame ou une nouvelle fentre de navigateur dans lequel le rsultat du formulaire doit s'afficher) Champ texte :
<INPUT TYPE=TEXT NAME="nom champ" SIZE="nb.car." MAXLENGTH="nb.max.car." VALUE="val.prdf.">

Champ texte dont le contenu entr sera masqu par des caractres "*" :
<INPUT TYPE=PASSWORD NAME="nom champ" SIZE="nb.car." MAXLENGTH="nb.max.car." VALUE="val.prdf.">

Champ de slection (avec bouton "Browse...") et d'envoi au serveur d'un fichier local (c--d. situ sur machine du navigateur) :
<INPUT TYPE=FILE NAME="nom champ" VALUE="path et nom initial fichier">

Elment qui est transmis au serveur mais qui est invisible au navigateur :
<INPUT TYPE=HIDDEN NAME="nom champ" VALUE="texte">

Exercices HTML
Bouton radio :

www.rahmouni.ma

<INPUT TYPE=RADIO NAME="nom champ" VALUE="valeur retourne"

label Case cocher :

{CHECKED}> <INPUT TYPE=CHECKBOX NAME="nom champ" VALUE="valeur retourne"

label Pour zone de texte de plusieurs lignes :

{CHECKED}> <TEXTAREA NAME="nom champ" COLS="nb.col." ROWS="nb.lignes"

texte par dfaut </TEXTAREA> (avec VIRTUAL, pas d'ascenseur horizontal : le texte passe automatiquement la ligne) Pour un menu :
WRAP="PHYSICAL|VIRTUAL"> <SELECT NAME="nom champ" SIZE="nb.articles" {MULTIPLE}> <OPTION {SELECTED}>article

menu

......
</SELECT>

Bouton de soumission :
<INPUT TYPE=SUBMIT VALUE="nom bouton" >

et bouton de reset (remise des champs leurs valeurs initiales) :

<INPUT TYPE=RESET VALUE="nom bouton" >

Autres boutons : - bouton personalisable utilisable pour dclencher fonction JavaScript :

<INPUT TYPE=BUTTON VALUE="nom bouton" NAME="nom pass au serveur">

- bouton image (si l'on clique dessus, la paire de valeurs "nom.x=coordX&nom.y=coordY" est envoye au serveur) :
<INPUT TYPE=IMAGE NAME="nom" SRC="URL image" ALIGN="TOP|MIDDLE|BOTTOM">

Fin du formulaire :
</FORM>

Encadrement/groupage et lgende d'un groupe de champs (balises HTML 4)

<FIELDSET STYLE="background: #EEEEEE ;"> <LEGEND ALIGN="center" STYLE="color: #3333DD ; background: #CCCCFF ;"> <B>Informations</B> </LEGEND> Age <INPUT ...> Poids <INPUT ...> Taille <INPUT ...> </FIELDSET>

Exercices HTML
Remarques sur la
METHOD

www.rahmouni.ma

et le type d'encodage

ENCTYPE

outre la mthode POST, on peut faire usage de la mthode GET qui est cependant dconseille en raison de ses limitations (les donnes du formulaire sont URL-encodes dans la ligne d'en-tte GET de la requte HTTP dans une chane de caractre dont la taille est limite) la mthode POST, par laquelle les donnes du formulaire sont envoyes dans le corps de la requte HTTP), offre en outre le choix du mcanisme d'encodage ENCTYPE : o si rien n'est spcifi, c'est ENCTYPE="application/x-www-formurlencoded" qui sera utilis par dfaut : les champs du formulaire sont alors URL-encods sur une longue chane de la mme manire qu'avec la mthode GET, mais ici sans limitation de taille o on utilisera ENCTYPE="multipart/form-data" dans le cas d'un formulaire servant uploader un fichier avec <INPUT
TYPE=FILE ...> o

on utilisera ENCTYPE="text/plain" si l'on souhaite se faire envoyer par E-mail les champs du formulaire avec l'action ACTION="mailto:adresse_email?Subject=sujet"

Validation des donnes d'un formulaire

Pour vrifier la pertinence des donnes envoyes par l'utilisateur un serveur via un formulaire (s'assurer que tous les champs ncessaires soient bien remplis, que les types de donnes soient corrects...), on peut envisager 2 techniques (et il vaudrait mme les utiliser simultanment) :

validation cot client, par des fonctions JavaScript intgres la page-formulaire (voir cet exemple) : approche qui convient pour des contrles simples (l'utilisateur pouvant contourner ces contrles en fabriquant une requte falsifie avec un effort de programmation minimum) validation cot serveur, par le script CGI ou le programme PHP auquel ce formulaire est soumis, et renvoi du formulaire l'utilisateur en cas de donnes errones (solution la plus sre, mais plus lourde car impliquant des allers et retours entre le client et le serveur)

Exercices HTML

www.rahmouni.ma

Quelques astuces JavaScript en relation avec les formulaires

1) Pour automatiquement placer le curseur dans un champ donn d'un formulaire comportant plusieurs champs, utiliser la fonction JavaScript focus() sur ce champ.
Utiliser par exemple ceci au niveau de la dclaration <BODY>:
<BODY onload="document.forms.form.champ.focus()">

ou bien le code JavaScript suivant plac aprs la dclaration du champ :

<SCRIPT LANGUAGE="JavaScript"> <!-document.forms.form.champ.focus(); // --> </SCRIPT>

o form est le nom du formulaire, et champ est le nom du champ. Mais on pourrait utiliser pluttdocument.getElementById('idchamp').focus() (au lieu dedocument.forms.form.champ.focus()) si l'on ajoute l'attributID="idchamp" dans la balise de dfinition du champ.

2) Pour automatiquement slectionner ou effacer le contenu d'un champ lorsque l'on clique dedans, utiliser respectivement les vnements onFocus="this.select()" et onFocus="this.value=''"
Exemple de slectionnement du contenu:
<INPUT TYPE="TEXT" NAME="nom" VALUE="entrez votre nom" onFocus="this.select()">

Exemple d'effacement du contenu:

<INPUT TYPE="TEXT" NAME="nom" VALUE="entrez votre nom" onFocus="this.value=''">

Dfinition de l'ordre de "tabulation" des champs d'un formulaire

Pour dfinit l'ordre de slectionnement des champs d'un formulaire lorsque l'on utilise la touche <tab>, on fera usage de l'attribut TABINDEX="numro".

Exercices HTML

www.rahmouni.ma

Usage de CSS en relation avec les formulaires

Les possibilits lies aux feuilles de styles CSS sont innombrables. Examinez l'exemple ci-dessous :
<STYLE TYPE="text/css"> <!-.etiquette { font-size: smaller; font-weight: bold; color: #ffffff; background: #999999; cursor: pointer; } .champ { background: #eeeeee; border: solid 1px #ffffff; border-topcolor: #888888; border-left-color: #888888; } .champ:hover, .champ:focus { border: 1px solid #6666ff; background: #ffffff; } .bouton { color: #000099; font-weight: bold; background: #bbbbff; border: solid 2px #6666ff; border-topcolor: #ffffff; border-left-color: #ffffff; } .bouton:hover { color: #6666ff; background: #ccccff; } .bouton:focus { background: #bbbbff; border: solid 2px #ffffff; border-topcolor: #6666ff; border-left-color: #6666ff; } --> </STYLE> <FORM> <LABEL FOR="idnom" CLASS=etiquette>Nom</LABEL> <INPUT TYPE="TEXT" NAME="nom" ID="idnom" CLASS=champ><P> <LABEL FOR="idprenom" CLASS=etiquette>Prnom</LABEL> <INPUT TYPE="TEXT" NAME="prenom" ID="idprenom" CLASS=champ><P> <LABEL FOR="idaccept" CLASS=etiquette>J'accepte les conditions</LABEL> <INPUT TYPE="CHECKBOX" NAME="accepted" ID="idaccept"> <INPUT TYPE="SUBMIT"

Exercices HTML
CLASS="bouton" VALUE=" "> </FORM> Envoyer

www.rahmouni.ma

Explications : 1. La balise <LABEL> permet de dfinir des tiquettes de champ qui soient cliquables ; ainsi, dans l'exemple ci-dessus : o le fait de cliquer sur "Nom" ou "Prnom" met automatiquement le focus dans le champ correspondant o le fait de cliquer sur "J'accepte les conditions" active/dsactive la case cocher correspondante (bascule) A l'aide de la classe CSS ".etiquette" on attire ici l'attention de l'utilisateur sur ces labels : en dfinissant que le curseur survolant des labels soit de type main o et en changeant la couleur de l'arrire-plan (background) 2. Les classes CSS ".champ", ".champ:focus" et ".champ:hover" sont utilises ici pour changer l'apparence des champs (encadrement, couleur de fond...) selon que le focus respectivement "n'est pas" ou "est" dans le champ, ou que le curseur "survole" le champ. De mme les classes CSS ".bouton", ".bouton:hover" et ".bouton:focus" sont utilises ici pour changer l'apparence du bouton "Soumettre" (selon que le focus est sur le bouton ou que l'on clique dessus). Notez cependant que tout cela fonctionne parfaitement sous Mozilla, mais pas sous le navigateur IE 6 (qui ne supporte pas les pseudo-classe ":focus" et ":hover"), navigateur pour lequel il faudrait faire un peu de JavaScript pour obtenir le mme effet.
o

Rfrences

Cours "Technologies Web" du soussign, notamment pour les aspects relatifs la programmation CGI et PHP

Donne de l'exercice

Exercices HTML
Raliser le formulaire ci-dessous :

www.rahmouni.ma

Pour mettre en page les diffrents lments du formulaire (alignement des champs...), on utilise en gnral l'une des deux techniques suivantes : o dfinition de tous les champs dans bloc <PRE> ... </PRE> (o les <espace>, <cr>... sont significatifs) o dfinition de tous les champs dans un tableau (dont on peut rendre les bordures invisibles) La seconde technique, utilise ci-dessous, permet une mise en page plus sophistique

Le texte en petits caractres italiques rouges est indicatif Test : si vous dsirez voir la forme que prend la chane de caractre "URL-encode" (contenant les variables du formulaire) que le script envoie au serveur lorsque l'on presse le bouton d'envoi, vous pouvez commencer votre formulaire par la balise <FORM METHOD="GET"
ACTION="nom_de_votre_page.html">

Exercices HTML

www.rahmouni.ma

Corrig de l'exercice
<FORM METHOD="GET" ACTION="nom_de_votre_page.html"> <FIELDSET STYLE="background: #FFFFDD ;"> <LEGEND STYLE="background: #FFFF88 ;"><B>Client</B></LEGEND> <CENTER><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="95%"> <TR> <TD WIDTH="20%"><B>Civilit</B> <TD WIDTH="70%"> <INPUT TYPE=RADIO NAME=civilite VALUE="Mademoiselle">Mademoiselle <INPUT TYPE=RADIO NAME=civilite VALUE="Madame" CHECKED>Madame <INPUT TYPE=RADIO NAME=civilite VALUE="Monsieur">Monsieur <TR> <TD><B>Nom / Prnom</B> <TD> <INPUT TYPE=TEXT NAME=nom SIZE=50 MAXLENGTH=80> <TR> <TD><B>Adresse</B> <TD> <TEXTAREA NAME=adresse COLS=50 ROWS=2 WRAP=PHYSICAL>Rue No Bote postale</TEXTAREA> <TR> <TD><B>No postal / Localit</B> <TD> <INPUT TYPE=TEXT NAME=no_postal Size=5 MAXLENGTH=4> <INPUT TYPE=TEXT NAME=localite SIZE=20 MAXLENGTH=80 VALUE="Lausanne"> <TR> <TD><B>Pays</B> <TD> <SELECT NAME=pays> <OPTION>France <OPTION>Italie <OPTION SELECTED>Suisse </SELECT> <TR> <TD><B>Plateforme(s)</B> <TD> <INPUT TYPE=CHECKBOX NAME=materiel VALUE="Windows" CHECKED>Windows <INPUT TYPE=CHECKBOX NAME=materiel VALUE="Mac" CHECKED>Macintosh <INPUT TYPE=CHECKBOX NAME=materiel VALUE="Unix">Unix <TR> <TD><B>Applications(s)</B> <TD> <SELECT NAME=applications SIZE=5 MULTIPLE> <OPTION SELECTED>Bureautique <OPTION>DAO <OPTION>Statistiques <OPTION>SGBD <OPTION SELECTED>Internet </SELECT> </TABLE></CENTER>

Exercices HTML
</FIELDSET>

www.rahmouni.ma

<CENTER><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10" WIDTH="95%"> <TR><TH> <INPUT TYPE=SUBMIT VALUE=" Soumettre formulaire "> <INPUT TYPE=RESET VALUE=" Effacer "> </TABLE></CENTER> </FORM>