10 - exercices html formulaires

7/29/2019 10 - Exercices HTML Formulaires

1/9

Exercices HTML www.rahmouni.ma

Formulaires

Thme

Ralisation de formulaires HTML. Mais l'objectif n'est ici pasd'apprendre raliser le script CGI ou le programme PHP ouASP qui, cot serveur Web, prendra en charge les donnesenvoyes par ce formulaire (pour cela, voir le cours "TechnologiesWeb" du soussign).

Remarque : les formulaires HTML sont supports partir desversions de browsers Netscape 1 et IExplorer 1

Balises

Les lments de construction d'un formulaire Web (champs desaisie, boutons radio, cases cocher, menus droulants...) sontce que l'on appelle communment, en programmation d'interfacesutilisateurs graphiques (GUI), des "widgets" (windows gadgets).

Dbut du formulaire :(avec l'attribut TARGET, on peut dfinir le frame ou

une nouvelle fentre de navigateurdans lequel le rsultat du formulaire doit s'afficher)

Champ texte :

Champ texte dont le contenu entr sera masqu par des

caractres "*" :

Champ de slection (avec bouton "Browse...") et d'envoi auserveur d'un fichier local (c--d. situ sur machine dunavigateur) :Elment qui est transmis au serveur mais qui

est invisible au navigateur :


2/9


Bouton radio :labelCase cocher :labelPour zone de texte de plusieurs lignes :texte par dfaut(avecVIRTUAL, pas d'ascenseur horizontal : le texte

passe automatiquement la ligne)Pour un menu :article menu......

Bouton de soumission :

et bouton de reset (remise des champs leurs valeursinitiales) :

Autres boutons :- bouton personalisable utilisable pour dclencherfonction JavaScript :

- bouton image (si l'on clique dessus, la paire de valeurs"nom.x=coordX&nom.y=coordY" est envoye au serveur) : Fin du formulaire :

Encadrement/groupage et lgende d'un groupe de champs

(balises HTML 4)

Informations

Age Poids

Taille


3/9


Remarques sur laMETHOD et le type d'encodage ENCTYPE :

outre la mthode POST, on peut faire usage de lamthode GET qui est cependant dconseille en raison de ses

limitations (les donnes du formulaire sont URL-encodesdans la ligne d'en-tte GET de la requte HTTP dans unechane de caractre dont la taille est limite)

la mthode POST, par laquelle les donnes du formulaire sontenvoyes dans le corps de la requte HTTP), offre en outrele choix du mcanisme d'encodage ENCTYPE :

o si rien n'est spcifi, c'est ENCTYPE="application/x-www-form-urlencoded" qui sera utilis par dfaut : les champs duformulaire 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'unformulaire servant uploaderun fichier avec

o on utilisera ENCTYPE="text/plain" si l'on souhaite se faireenvoyer par E-mail les champs du formulaire avecl'actionACTION="mailto:adresse_email?Subject=sujet"

Validation des donnes d'un formulairePour vrifier la pertinence des donnes envoyes par l'utilisateur un serveur via un formulaire (s'assurer que tous les champsncessaires soient bien remplis, que les types de donnes soientcorrects...), on peut envisager 2 techniques (et il vaudrait mmeles utiliser simultanment) :

validation cot client, par desfonctions JavaScript intgres la page-formulaire(voircet exemple) : approche qui convient pour descontrles simples (l'utilisateur pouvant contourner cescontrles en fabriquant une requte falsifie avec un effortde programmation minimum)

validation cot serveur, par le script CGI ou le programmePHP auquel ce formulaire est soumis, et renvoi du formulaire l'utilisateur en cas de donnes errones (solution la plussre, mais plus lourde car impliquant des allers et retours

entre le client et le serveur)
http://iste.epfl.ch/exercices_html/validation_formulaire.htmlhttp://iste.epfl.ch/exercices_html/validation_formulaire.htmlhttp://iste.epfl.ch/exercices_html/validation_formulaire.html


4/9


Quelques astuces JavaScript en relation avecles formulaires

1) Pour automatiquement placer le curseur dans un champdonn d'un formulaire comportant plusieurs champs, utiliser lafonction JavaScript focus() sur ce champ.

Utiliser par exemple ceci au niveau de ladclaration :

ou bien le code JavaScript suivantplac aprs la dclaration du champ :

o formest le nom du formulaire, et champest lenom du champ. Mais on pourrait utiliserpluttdocument.getElementById('idchamp').focus()(au lieu dedocument.forms.form.champ.focus()) sil'on ajoute l'attributID="idchamp" dans la balisede dfinition du champ.

2) Pour automatiquement slectionner ou effacer le contenud'un champ lorsque l'on clique dedans, utiliser respectivementles vnements onFocus="this.select()" et onFocus="this.value=''"

Exemple de slectionnement ducontenu:

Exemple d'effacement du contenu:

Dfinition de l'ordre de "tabulation" deschamps d'un formulaire

Pour dfinit l'ordre de slectionnement des champs d'unformulaire lorsque l'on utilise la touche , on fera usage del'attribut TABINDEX="numro".


5/9


Usage de CSS en relation avec les formulaires

Les possibilits lies aux feuilles de styles CSS sont innombrables.Examinez l'exemple ci-dessous :

Nom

Prnom

J'accepte lesconditions


6/9


CLASS="bouton" VALUE=" Envoyer">

Explications :

1.La balisepermet de dfinir des tiquettes de champqui soient cliquables ; ainsi, dans l'exemple ci-dessus :

o le fait de cliquer sur "Nom" ou "Prnom" metautomatiquement le focus dans le champcorrespondant

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'attentionde l'utilisateur sur ces labels :

o en dfinissant que le curseur survolant des labels soitde type main

o et en changeant la couleur de l'arrire-plan(background)

2.Les classes CSS ".champ", ".champ:focus" et ".champ:hover" sontutilises ici pour changer l'apparence des champs(encadrement, couleur de fond...) selon que le focusrespectivement "n'est pas" ou "est" dans le champ, ou que lecurseur "survole" le champ. De mme les classes CSS".bouton", ".bouton:hover" et ".bouton:focus" sont utilises ici pourchanger l'apparence du bouton "Soumettre" (selon que lefocus est sur le bouton ou que l'on clique dessus). Notezcependant que tout cela fonctionne parfaitement sousMozilla, mais pas sous le navigateur IE 6 (qui ne supporte

pas les pseudo-classe ":focus" et ":hover"), navigateur pourlequel il faudrait faire un peu de JavaScript pour obtenir lemme effet.

Rfrences

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

Donne de l'exercice


7/9


Raliser le formulaire ci-dessous :

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 ...

(o les , ... 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 miseen 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 duformulaire) que le script envoie au serveur lorsque l'onpresse le bouton d'envoi, vous pouvez commencer votreformulaire par la balise


8/9


Corrig de l'exercice

Client

Civilit

MademoiselleMadameMonsieur

Nom / Prnom

Adresse Rue No

Bote postale

No postal / Localit

Pays

FranceItalieSuisse

Plateforme(s) Windows

Macintosh

Unix

Applications(s)

BureautiqueDAOStatistiquesSGBDInternet


9/9


10 - exercices html formulaires

Documents