Академический Документы
Профессиональный Документы
Культура Документы
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
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" >
- 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>
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 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
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()">
Exercices HTML
www.rahmouni.ma
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>