Vous êtes sur la page 1sur 5

3.

Formulaires
Formulaires

Cours Web Formulaires


Lionel Seinturier Universit Pierre & Marie Curie
Lionel.Seinturier@lip6.fr

HTML 1.0 essentiellement "mono"-directionnel informations fournies par le serveur (suite une commande client) Utilisation professionnelle ncessit de flux d'information bi-directionnels (client serveur) HTML 2.0 introduit les formulaires permettent aux clients de saisir des informations qui seront envoyes aux serveurs Un formulaire est dfini en HTML et peut contenir - zones de saisie de texte - botes cocher - boutons radio - menus droulants - boutons
Web 93 Lionel Seinturier

8/9/03
Web 92 Lionel Seinturier

3. Formulaires
Exemple de formulaire HTML
<HTML> <BODY> <FORM ACTION="http://monserveur.com/prog.php" METHOD=POST> Nom <INPUT NAME="client" SIZE=46> <P> Rue <INPUT NAME="rue" SIZE=40> <P> Ville <INPUT NAME="ville" SIZE=20> Code postal <INPUT NAME="cp" SIZE=5> <P> Carte de crdit No <INPUT NAME="carte" SIZE=10> Expire <INPUT NAME="expire" TYPE=TEXT SIZE=4> <P> M/C <INPUT NAME="cc" TYPE=RADIO VALUE="mc" CHECKED> VISA <INPUT NAME="cc" TYPE=RADIO VALUE="vis"> <P> Contre remboursement <INPUT NAME="cr" TYPE=CHECKBOX> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise zro"> <P> </FORM> </BODY> </HTML>

3. Formulaires
Exemple de formulaire HTML

Web

94

Lionel Seinturier

Web

95

Lionel Seinturier

3. Formulaires
Balises <FORM> </FORM>
Dclaration d'un formulaire Attributs principaux (<FORM ACTION=.. METHOD=.. NAME=.. >) ACTION METHOD NAME TARGET URL vers laquelle envoyer les donnes saisies commande HTTP utiliser pour effectuer l'envoi POST nom du formulaire nom de la frame dans laquelle le rsultat doit tre affich

3. Formulaires
Balise <INPUT>
Dclaration des champs de saisie (exclusivement entre <FORM> </FORM>) NAME nom du champ de saisie (unique l'intrieur d'un formulaire) TYPE type du champ de saisie Types possibles (TYPE=...) TEXT RADIO CHECKBOX SUBMIT RESET
Web

toutes les balises HTML sont permises entre <FORM> </FORM> images, tableaux, ... peuvent tre inclus dans un formulaire des formulaires peuvent tre insrs l'intrieur d'un autre formulaire

zone de saisie texte (type par dfaut en cas d'omission de TYPE) SIZE : taille de la zone bouton radio tous les boutons ayant mme nom (NAME) au mme groupe dans ce cas, les attributs (VALUE) permettent de les diffrencier bote cocher bouton d'envoi des donnes au serveur bouton d'effacement du formulaire
97 Lionel Seinturier

Web

96

Lionel Seinturier

3. Formulaires
Envoi des donnes au serveur
Lorsque l'utilisateur appuie sur le bouton SUBMIT, le navigateur contruit une chane de caractres contenant toutes les donnes du formulaire envoie cette chane au serveur Chane ensemble de couples spares par le caractre & chaque couple est de la forme nom de champ = valeur saisie les espaces sont remplacs par le caractre + les caractres + & = sont encods %2B %26 %3D Exemple (1 seule ligne) client=Jean+Vier&rue=54+rue+Gambetta&ville=Paris& cp=75001&carte=0123456789&cc=vis&cr=on Rq : pour les botes cocher =on si coche, rien sinon
Web 98 Lionel Seinturier

3. Formulaires
Autres types possibles pour la balise <INPUT>
PASSWORD FILE
<HTML> <BODY> <FORM ACTION="http://monserveur.com/prog.php" METHOD=POST ENCTYPE="multipart/form-data"> Mot de passe <INPUT TYPE=PASSWORD NAME="passe" SIZE=16> <P> Slectionner un fichier <INPUT TYPE=FILE NAME="fichier"> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise zro"> <P> </FORM> </BODY> </HTML>

zone de saisie d'un mot de passe + attribut ENCTYPE slection d'un fichier envoyer

Web

99

Lionel Seinturier

3. Formulaires
Autres types possibles pour la balise <INPUT>

3. Formulaires
Autres types possibles pour la balise <INPUT>

clic

PASSWORD FILE

les caractres saisis sont remplacs par des * provoque l'affichage - d'un champ de saisie du nom du fichier - d'un bouton Parcourir pour slectionner le fichier via une fentre de parcours du disque
100 Lionel Seinturier Web 101 Lionel Seinturier

Web

3. Formulaires
Encodage fichiers joints
-----------------------------7d225420d803c8 Content-Disposition: form-data; name="fichier"; filename="..." Content-Type: image/gif GIF89a& ... contenu binaire du fichier ... -----------------------------7d225420d803c8 Content-Disposition: form-data; name="passe" en clair -----------------------------7d225420d803c8--

3. Formulaires
Autres types possibles pour la balise <INPUT>
HIDDEN BUTTON champ cach (ne provoque aucun affichage) un bouton simple association avec un traitement JavaScript

<HTML> <BODY> <FORM ACTION="http://monserveur.com/prog.php" METHOD=POST> Champ cach <INPUT TYPE=HIDDEN NAME="cache" VALUE="Lionel"> <P> <INPUT TYPE=BUTTON VALUE="Cliquez" onClick="fonctionJavaScript()"> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise zro"> <P> </FORM> </BODY> </HTML>

sparateur dtermin alatoirement chaque upload par le navigateur + dans les en-ttes HTTP de la requte
Content-Type: multipart/form-data; boundary=---------------------------7d225420d803c8

filename navigateurs Windows : nom local complet (C:\Mes documents\toto.doc) filename navigateurs Unix/Mac : nom local simple (toto.doc)
Web 102 Lionel Seinturier

Web

103

Lionel Seinturier

3. Formulaires
Autres types possibles pour la balise <INPUT>
Champ HIDDEN transmission d'informations "furtives" dans une chane de formulaires

3. Formulaires
Autres types possibles pour la balise <INPUT>
Champ HIDDEN transmission d'informations "furtives" dans une chane de formulaires

2
Web 104 Lionel Seinturier

prog. 12 prog. 23

insertion d'un champ cach dans le form. 2 (VALUE="Lionel") rcupration de cach pour gnrer form. 3

Web

105

Lionel Seinturier

3. Formulaires
Autres balises possibles dans un formulaire
TEXTAREA SELECT zone de saisie d'un texte sur plusieurs lignes dfinition d'un menu droulant balise OPTION pour dfinir les choix du menu

3. Formulaires
Autres balises possibles dans un formulaire

<HTML> <BODY> <FORM ACTION="http://monserveur.com/prog.php" METHOD=POST> <TEXTAREA NAME="zone" ROWS=3 COLS=40>texte initial</TEXTAREA> <P> <SELECT NAME="musicTypes"> <OPTION> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> </FORM> </BODY> </HTML>

clic

Web

106

Lionel Seinturier

Web

107

Lionel Seinturier

3. Formulaires
Autres balises possibles dans un formulaire
SELECT MULTIPLE
<HTML> <BODY> <FORM ACTION="http://monserveur.com/prog.php" METHOD=POST> <SELECT MULTIPLE NAME="musicTypes"> <OPTION> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> </FORM> </BODY> </HTML>

dfinition d'un menu droulant choix multiples

Par dfaut taille zone = 4, sinon attribut size


Web 108 Lionel Seinturier