Sommaire

Transcription

Sommaire

Techniques à Objets et Internet
Le Web et sa programmation
Jean-François Perrot
Université Pierre et Marie Curie (Paris 6)
Cours n° 2
Scripts CGI et formulaires HTML
Sommaire
Formulaires et scripts CGI : 3 - 14
Éléments de formulaire : 15 - 34
les différentes sortes de input : 16 - 29
les select : 30 - 32
les textarea : 33 - 34
Cours n° 2
TOI-Web 2004
J-F.Perrot
2
1
Notion de formulaire (form)
• Une des utilisation majeures du Web est d'échanger des
informations structurées : en effet l'interprétation automatique d'un
texte libre n'est pas pour demain, et aujourd'hui comme hier la
machine s'appuie sur la structure des informations (leur syntaxe)
pour leur donner un sens (une sémantique).
• Une page Web offre un cadre excellent pour recevoir et afficher
une information. Pour l'opération inverse d'envoi d'une information
la question se pose d'abord de sa saisie.
La notion de formulaire répond à cette question.
• La question se pose ensuite de son interprétation : chez le client
ou chez le serveur ?
– initialement, les formulaires ont été conçus en vue d'une
interprétation par le serveur (scripts CGI);
– nous verrons avec JavaScript le moyen d'une interprétation par
le client.
Cours n° 2
TOI-Web 2004
J-F.Perrot
3
Structure d'un formulaire
Un formulaire HTML est composé d'une suite de champs placés
sous une balise <form> ... </form>
Chacun de ces champs porte un nom et
permet de saisir une donnée sous
forme de chaîne de caractères : la
valeur du champ.
L'information saisie par le formulaire est
constituée de la collection des couples
(nom, valeur) provenant des différents
champs.
Les modalités de la saisie peuvent être
variées selon la nature des champs et
selon la mise en page.
Cours n° 2
TOI-Web 2004
J-F.Perrot
Exemple :
4
2
Exemple
de formulaire
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title> Essai de formulaire </title>
</head>
<body>
<p>Debut</p>
<form action="http://webia.lip6.fr/~jfp/php/querycgi.php">
<p> <strong>Nom :</strong> <input type="text" name="leNom" /> </p>
<p> <strong>Prénom :</strong> <input type="text" name="lePrenom" /> </p>
<p> <strong>Sexe :</strong> <br />
<input type="radio" name="leSexe" value="M" /> M<br /> 
<input type="radio" name="leSexe" value="F" /> F<br /> 
</p>
<p> <strong>Âge : </strong>
<input type="text" name="Age" />
</p>
<p> <strong>Activités favorites :</strong> <br />
<input type="checkbox" name="laMusique"
value="Oui" checked="checked" /> Musique <br />
<input type="checkbox" name="leSport"
value="Oui" /> Sport <br />
</p>
<p> <input type="submit" value="Envoi" /> <br /> </p>
</form>
<p>Fin</p>
</body>
</html>
Cours n° 2
TOI-Web 2004
J-F.Perrot
5
Commentaire sur l'exemple
• Ne pas confondre
– les noms des champs (ici, leNom, lePrenom, etc.)
qui sont invisibles à l'utilisateur, et
– les désignations qu'ils portent dans la page,
qui sont purement cosmétiques.
– le formulaire "nu" est logiquement équivalent.
• Noter qu'il y a un seul champ nommé leSexe, les deux
"boutons radio" ne servant qu'à imposer un choix exclusif
entre un certain nombre (ici, 2) de valeurs possibles.
• En revanche, il y a bien deux champs différents laMusique
et leSport.
Cours n° 2
TOI-Web 2004
J-F.Perrot
6
3
Fonctionnement normal du formulaire
• Le formulaire une fois rempli, (peut-être
pas complètement...) sa mise en œuvre
est décrétée par clic sur le bouton
"Envoi".
• L'information qu'il contient est alors
– codée en une seule chaîne de
caractères de "format URL"
(encodage par défaut
application/x-www-form-urlencoded )
– envoyée sous cette forme au serveur
• Exemple : la chaîne codant le contenu du formulaire ci-dessus
leNom=Du+Nabla&lePrenom=Pierre+Andr%E9&leSexe=M&Age=45+ans&laMusique=Oui
Noter le traitement des blancs (remplacés par "+") et du "é" de "André".
Cours n° 2
TOI-Web 2004
J-F.Perrot
7
Envoi au serveur
• Pour que le formulaire puisse fonctionner normalement la balise
<form...> doit porter deux attributs supplémentaires indiquant
– l'un : l'URL du script CGI devant effectuer le traitement (sur le
serveur)
– l'autre : la manière dont le serveur communique la chaîne codée
audit script CGI.
• Le premier est nommé action, s'il est absent il prend comme
valeur par défaut l'URL de la page elle-même.
• Le second est appelé method, et peut prendre deux valeurs GET
(valeur par défaut) ou POST.
Dans le deux cas, la première tâche du script est de décoder la
chaîne pour récupérer le système des couples (nom, valeur) et en
faire ce que bon lui semble...
Cours n° 2
TOI-Web 2004
J-F.Perrot
8
4
Exemple de réponse du serveur
Avec le même formulaire, en renseignant le champ action
:
<form action="http://localhost/~jfp/cgi-bin/query.cgi">
on obtient comme réponse :
Cours n° 2
TOI-Web 2004
J-F.Perrot
9
Rappel sur la structure d'une URL
pour le protocole http
• Une URL contient deux parties
– celle qui désigne le fichier à activer par le serveur (à envoyer au
client si c'est un texte html, ou à exécuter si c'est un script cgi)
http://host:port/path
souvent employée seule avec un navigateur...
– celle qui désigne les arguments de l'action, de la forme
?nom=valeur&nom=valeur&...nom=valeur
appelée query, et que le serveur loge automatiquement
dans sa variable QUERY_STRING
• Un formulaire n'est pas autre chose qu'un éditeur de queries, qui permet
de les écrire commodément, et en garantissant un encodage correct.
Cours n° 2
TOI-Web 2004
J-F.Perrot
10
5
Exemple
Le formulaire précédent
(avec la méhode GET)
ne sert qu'à synthétiser l'URL
(sur une seule ligne, sans blancs !!!)
"http://localhost/~jfp/cgi-bin/deust/query.cgi
?leNom=Du+Nabla&lePrenom=Pierre+Andr%E9
&leSexe=M&Age=45+ans&laMusique=Oui"
Cours n° 2
TOI-Web 2004
J-F.Perrot
11
L'environnement du serveur
• Le serveur gère tout un environnement au sein duquel va
s'exécuter le script CGI.
Ledit script va donc devoir interroger son environnement par
des appels au système (en C, par la fonction getenv).
• Par exemple, la valeur de l'attribut METHOD (dans le formulaire)
est connue dans cet environnement par la variable
REQUEST_METHOD.
On aura donc
– soit getenv("REQUEST_METHOD") <--> "GET"
– soit getenv("REQUEST_METHOD") <--> "POST"
• Enfin, pour être convenablement activé par le serveur, il faut
que le script CGI, en tant que fichier exécutable, soit placé dans
un répertoire appelé ... /cgi-bin (cf. exemple précédent).
Cours n° 2
TOI-Web 2004
J-F.Perrot
12
6
Modalités de transmission
de la chaîne codée
• Pour method=GET (valeur par défaut)
– la chaîne codée se trouve comme valeur de la variable
d'environnement QUERY_STRING
– elle est envoyée au serveur comme complément à l'URL
action : l'appel au serveur prend alors la forme d'une URL,
qui peut être réactivée, ou enregistrée comme signet
– sa longueur est limitée à 200 caractères...
• Pour method=POST
– la chaîne codée est lue par le script sur son entrée standard
(stdin), sans limitation de longueur
– sa longueur se trouve comme valeur de la variable
d'environnement CONTENT_LENGTH
– l'appel au serveur ne mentionne que l'URL action
Cours n° 2
TOI-Web 2004
J-F.Perrot
13
Note sur les scripts CGI
• Un script CGI est un programme critique :
– il est normalement activé depuis une machine distante, ce qui
pose évidemment de graves problèmes de sécurité ;
– il peut être activé concurremment depuis plusieurs clients, ce
qui pose des problèmes de partage de ressources.
• Il peut être écrit en n'importe quel langage offrant l'accès à
l'environnement du serveur (le modèle classique distribué par
NCSA est écrit en C).
• La rédaction de scripts CGI se fait plus souvent au moyen de
PHP (ou de Perl), qui rend les choses beaucoup plus faciles
qu'en C !
Cours n° 2
TOI-Web 2004
J-F.Perrot
14
7
Les trois grande catégories
d'éléments de formulaires
Les éléments de formulaire se répartissent en trois catégories :
• les input qui peuvent prendre des formes ("types") multiples ;
<input type="..." name="nnn"... /> (éléments XML vides)
• les select qui permettent de choisir dans une liste d'options ;
<select name="nnn">
<option value="aaa" />1 <option value="bbb" />2 ...
</select>
• les textarea qui autorisent l'utilisateur à fournir un texte de plusieurs lignes.
<textarea name="nnn" rows=rr cols=cc>
... texte par défaut ...
</textarea >
Cours n° 2
TOI-Web 2004
J-F.Perrot
15
Les différentes espèces ("types")
d'éléments input
• Les champs-texte (text fields) type="text"
et leur variante les mots de passe type="password"
• Les "boutons" (buttons) type="button"
et leurs deux sous-espèces particulières
– les réinitialiseurs (reset) type="reset"
– les envoyeurs (submit) type="submit"
• Les "boutons radio" (radio buttons) type="radio"
• Les cases à cocher (checkboxes) type="checkbox"
• Les champs cachés (hidden) type="hidden"
Cours n° 2
TOI-Web 2004
J-F.Perrot
16
8
<input type="text"... />
alias "champ-texte" ou text field
• Propriétés (chaînes) définies comme des attributs de la balise :
– name fixée dans la balise <input...name="leNom"... />
– defaultValue fixée dans la balise
<input...value="laValeurInitiale"... />
– value modifiable par affectation !
• Comportement :
– présente un champ éditable où l'utilisateur écrit la valeur value
(chaîne de caractères) qui sera transmise au serveur sous le nom valeur
de l'attribut id.
Cours n° 2
TOI-Web 2004
J-F.Perrot
17
<input type="password"... />
alias "mot de passe" ou password
• Propriétés : comme pour type = "text"
• Comportement :
– au lieu d'afficher la chaîne tapée par l'utilisateur, chaque
caractère est remplacé par une étoile (ou par tout autre
caractère anonyme).
Cours n° 2
TOI-Web 2004
J-F.Perrot
18
9
<input type="button"... />
alias "bouton" ou push button
• Instruments qui ne servent qu'à déclencher des actions :
voir JavaScript !
• Propriétés :
– name (chaîne) fixée dans la balise
<input...name="leNom"... />
– value (chaîne) fixée dans la balise (apparaît sur le bouton)
<input...value="uneChaine"... />
Cours n° 2
TOI-Web 2004
J-F.Perrot
19
<input type="reset"... />
alias "bouton reset"
• Un bouton reset a en principe pour fonction de remettre
l'ensemble du formulaire dans son état initial.
• Il a les mêmes propriétés et fonctionnalités qu'un push button
ordinaire : c'est un bouton avec un handler onClick par défaut
qui réinitialise le formulaire.
• Il est donc normalement unique dans le formulaire.
Cours n° 2
TOI-Web 2004
J-F.Perrot
20
10
<input type="submit"... />
alias "bouton submit"
• Un bouton submit a en principe pour fonction d'envoyer le
contenu courant du formulaire au script CGI chargé de son
exploitation.
• Il a les mêmes propriétés et fonctionnalités qu'un push button
ordinaire : c'est un bouton avec un handler onClick par défaut
qui envoie le contenu du formulaire.
• Il est donc normalement unique dans le formulaire.
Cours n° 2
TOI-Web 2004
J-F.Perrot
21
<input type="radio"... />
alias "bouton-radio" ou radio button
• Les "boutons-radio" vont par groupes portant le même nom mais
des valeurs différentes. Chaque groupe correspond à un champ
unique : les différents boutons servent à sélectionner une et une
seule des valeurs proposées, qui est alors la valeur du champ.
• Par exemple : pour un champ nommé "couleur", on peut proposer
un choix exclusif entre les valeurs rouge, orangé, jaune, vert, bleu,
indigo et violet, par un jeu de 7 boutons radio.
• Il faut donc distinguer les propriétés et méthodes relatifs à chaque
bouton de celles qui visent le groupe tout entier.
Cours n° 2
TOI-Web 2004
J-F.Perrot
22
11
radio button suite
•
Le groupe se matérialise par un tableau de boutons, qui porte le nom
(id) commun à tous ses membres.
Le nombre de boutons est donc accessible par l'attribut length du
tableau en question
• Chaque bouton radio a comme
– Propriétés
• defaultChecked (booléen) fixée dans la balise par la présence ou
l'absence de l'attribut checked="checked"
• checked (booléen) modifiable par affectation
• value (chaîne) fixée dans la balise
<input...value="uneChaine"... />
– Comportement
Fixe la valeur attribuée au nom en choisissant celle du bouton
sélectionné.
Cours n° 2
TOI-Web 2004
J-F.Perrot
23
Essai avec boutons radio : les couleurs
<head>
<title>EssaiRadio</title>
</head>
<body> <p>Debut</p>
<p> <input type= "radio" name="Couleur" value="#FF0000" /> Rouge <br />
<input type= "radio" name="Couleur" value="#FF8000" />
Orangé<br />
<input type= "radio" name="Couleur" value="#FFFF00" /> Jaune<br />
<input type= "radio" name="Couleur" value="#00FF00" /> Vert<br />
<input type= "radio" name="Couleur" value="#0000FF" /> Bleu<br />
<input type= "radio" name="Couleur" value="#000080" /> Indigo<br />
<input type= "radio" name="Couleur" value="#FF00FF" /> Violet
</p>
</form>
<p>Fin</p>
</body>
</html>
Cours n° 2
TOI-Web 2004
J-F.Perrot
24
12
Essai avec boutons radio : l'affichage
Cours n° 2
TOI-Web 2004
J-F.Perrot
25
<input type="checkbox"... />
alias "case à cocher" ou checkbox
• Propriétés :
– id (chaîne) fixée dans la balise
<input...name="leNom"...>
– defaultChecked (booléen) fixée dans la balise par la présence
ou l'absence de checked="checked"
– checked (booléen) modifiable par Click
– value (chaîne) fixée dans la balise
<input...value="uneChaine"...>
Cours n° 2
TOI-Web 2004
J-F.Perrot
26
13
Emploi des cases à cocher
• Les champs checkbox portent une double information
– leur valeur (chaîne), qui est transmise (au script CGI) si la
propriété checked est vraie au moment de l'envoi ; cette
valeur est fixée dans le texte HTML ;
– l'indicateur (booléen) checked, modifiable par l'utilisateur :
événement Click et utilisable pour toute sorte de tests.
• Voici un exemple utilisant l'indicateur checked et où les
propriétés valeur ne jouent aucun rôle.
Cours n° 2
TOI-Web 2004
J-F.Perrot
27
Essai avec checkbox :
le formulaire
<head>
<title>EssaiCheck</title>
</head>
<body> <p>Debut</p>
<form action=
"http://webia.lip6.fr/~jfp/php/querycgi.php">
<p> <input type= "checkbox"
name="Red" />Rouge <br />
<input type= "checkbox"
name="Green" />Vert <br />
<input type= "checkbox"
name="Blue" />Bleu
</p><p>
Quand c'est fini cliquez ...
<input type= "submit" value="ici" />
</p>
</form>
<p>Fin</p> </body> </html>
Cours n° 2
TOI-Web 2004
J-F.Perrot
28
14
<input type="hidden"... />
alias "champ caché" ou hidden
• Comme son nom l'indique, un champ caché n'est pas exhibé sur
la page. À quoi peut-il servir ?
– À contenir une information de service que l'utilisateur n'a pas
à connaître (p.ex. une adresse sur le serveur)
– À contenir une valeur intermédiaire lors d'un calcul.
– Surtout, à réaliser un "état" permettant une suite d'échanges
avec le serveur (notion de session).
• Il n'a qu'une propriété (en plus de son nom) value, qui est une
chaîne de caractères, aucun événement, aucune méthode.
Cours n° 2
TOI-Web 2004
J-F.Perrot
29
Élément <select...>
• Un élément <select...> présente une liste (en représentation
interne, un tableau) d'options.
• Chaque option porte une étiquette qui l'identifie, et les propriétés
fixées dans la balise HTML value (chaîne) et
defaultselected (booléen, indiqué par la présence ou non de
l'attribut selected="selected")
• La liste elle-même possède une propriété selectedIndex qui
permet d'accéder à l'option choisie.
Cours n° 2
TOI-Web 2004
J-F.Perrot
30
15
Essai avec <select...>
<p> <select name="Couleur">
<option value="FF0000"> Rouge </option>
<option value="#FF8000">Orangé </option>
<option value="#FFFF00"> Jaune </option>
<option value="#00FF00"> Vert </option>
<option value="#0000FF" selected="selected"> Bleu
</option>
<option value="#000080"> Indigo </option>
<option value="#FF00FF"> Violet </option>
</select>
</p>
</form>
Cours n° 2
TOI-Web 2004
J-F.Perrot
31
Essai avec <select...>
(démo)
Cours n° 2
TOI-Web 2004
J-F.Perrot
32
16
Élément <textarea...>
Ne diffère du champ-texte que
par la possibilité de gérer
plusieurs lignes.
Mêmes propriétés, mêmes
fonctionnalités.
Cours n° 2
<head>
<title>Essaitextarea</title>
</head>
<body>
<form>
<p> Tapez votre texte ici :
<textarea name="Entree"
rows="5" cols="20">
Ceci est un
exemple
</textarea>
</p>
<p> Cliquez ...
<input type= "submit" value="ici" />
</p> </form>
</body></html>
TOI-Web 2004
J-F.Perrot
33
Essai avec <textarea...>
Cours n° 2
TOI-Web 2004
J-F.Perrot
34
17

Sommaire

Transcription

Documents pareils

Fiche 23 - HTML facile

Html et html5 1 - pierre

Le langage HTML

memento formulaires HTML

version pdf

contrôleur système principal main controller system im 300

Que désigne l`URL donnée au navigateur ?

BTS Groupe 1 Introduction au language php – partie n°1

Les formulaires