Scribd
Importer
8 vues15 pages

HTML

Le document explique le langage HTML, utilisé pour structurer des pages web avec des balises. Il décrit les éléments fondamentaux d'un document HTML, y compris les sections <head> et <body>, ainsi que des exemples de balises pour créer des tableaux, des images et des formulaires. La connaissance de HTML est essentielle pour la programmation web, même si des outils WYSIWYG peuvent faciliter la création de pages sans écrire de code.

Transféré par

bettalebmalek22
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
8 vues15 pages

HTML

Le document explique le langage HTML, utilisé pour structurer des pages web avec des balises. Il décrit les éléments fondamentaux d'un document HTML, y compris les sections <head> et <body>, ainsi que des exemples de balises pour créer des tableaux, des images et des formulaires. La connaissance de HTML est essentielle pour la programmation web, même si des outils WYSIWYG peuvent faciliter la création de pages sans écrire de code.

Transféré par

bettalebmalek22
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

c'est à dire exactement ce qu'on a envoyé depuis le serveur générique.

1.8 Le langage HTML


Un navigateur Web peut afficher divers documents, le plus courant étant le document HTML (HyperText Markup Language).
Celui-ci est un texte formaté avec des balises de la forme <balise>texte</balise>. Ainsi le texte <B>important</B> affichera le texte
important en gras. Il existe des balises seules telles que la balise <hr> qui affiche une ligne horizontale. Nous ne passerons pas en
revue les balises que l'on peut trouver dans un texte HTML. Il existe de nombreux logiciels WYSIWYG permettant de construire
une page web sans écrire une ligne de code HTML. Ces outils génèrent automatiquement le code HTML d'une mise en page faite à
l'aide de la souris et de contrôles prédéfinis. On peut ainsi insérer (avec la souris) dans la page un tableau puis consulter le code
HTML généré par le logiciel pour découvrir les balises à utiliser pour définir un tableau dans une page Web. Ce n'est pas plus
compliqué que cela. Par ailleurs, la connaissance du langage HTML est indispensable puisque les applications web dynamiques
doivent générer elles-mêmes le code HTML à envoyer aux clients web. Ce code est généré par programme et il faut bien sûr savoir
ce qu'il faut générer pour que le client ait la page web qu'il désire.

Pour résumer, il n'est nul besoin de connaître la totalité du langage HTML pour démarrer la programmation Web. Cependant cette
connaissance est nécessaire et peut être acquise au travers de l'utilisation de logiciels WYSIWYG de construction de pages Web tels
que Word, FrontPage, DreamWeaver et des dizaines d'autres. Une autre façon de découvrir les subtilités du langage HTML est de
parcourir le web et d'afficher le code source des pages qui présentent des caractéristiques intéressantes et encore inconnues pour
vous.

1.8.1 Un exemple
Considérons l'exemple suivant, créé avec FrontPage Express, un outil gratuit livré avec Internet Explorer. Le code généré par
Frontpage a été ici épuré. Cet exemple présente quelques éléments qu'on peut trouver dans un document web tels que :

 un tableau
 une image
 un lien

Les bases de la programmation web 26


Un document HTML a la forme générale suivante :

<html>
<head>
<title>Un titre</title>
...
</head>
<body attributs>
...
</body>
</html>

L'ensemble du document est encadré par les balises <html>...</html>. Il est formé de deux parties :

1. <head>...</head> : c'est la partie non affichable du document. Elle donne des renseignements au navigateur qui va
afficher le document. On y trouve souvent la balise <title>...</title> qui fixe le texte qui sera affich é dans la barre de
titre du navigateur. On peut y trouver d'autres balises notamment des balises définissant les mots clés du document, mot
clés utilisés ensuite par les moteurs de recherche. On peut trouver également dans cette partie des scripts, écrits le plus
souvent en javascript ou vbscript et qui seront exécutés par le navigateur.
2. <body attributs>...</body> : c'est la partie qui sera affichée par le navigateur. Les balises HTML contenues dans cette
partie indiquent au navigateur la forme visuelle "souhaitée" pour le document. Chaque navigateur va interpréter ces balises
à sa façon. Deux navigateurs peuvent alors visualiser différemment un même document web. C'est généralement l'un des
casse-têtes des concepteurs web.

Le code HTML de notre document exemple est le suivant :

<html>
<head>
<title>balises</title>
</head>

<body background="/images/[Link]">
<center>
<h1>Les balises HTML</h1>
<hr>
</center>

Les bases de la programmation web 27


<table border="1">
<tr>
<td>cellule(1,1)</td>
<td valign="middle" align="center" width="150">cellule(1,2)</td>
<td>cellule(1,3)</td>
</tr>
<tr>
<td>cellule(2,1)</td>
<td>cellule(2,2)</td>
<td>cellule(2,3</td>
</tr>
</table>

<table border="0">
<tr>
<td>Une image</td>
<td><img border="0" src="/images/[Link]" width="80" height="95"></td>
</tr>
<tr>
<td>le site de l'ISTIA</td>
<td><a href="[Link]
</tr>
</table>
</body>
</html>

Ont été mis en relief dans le code les seuls points qui nous intéressent :

Elément balises et exemples HTML


titre du <title>balises</title>
document
balises apparaîtra dans la barre de titre du navigateur qui affichera le document
barre <hr> : affiche un trait horizontal
horizontale
tableau <table attributs>....</table> : pour définir le tableau
<tr attributs>...</tr> : pour définir une ligne
<td attributs>...</td> : pour définir une cellule

exemples :
<table border="1">...</table> : l'attribut border définit l'épaisseur de la bordure du tableau
<td valign="middle" align="center" width="150">cellule(1,2)</td> : définit une cellule dont le contenu sera
cellule(1,2). Ce contenu sera centré verticalement (valign="middle") et horizontalement (align="center"). La
cellule aura une largeur de 150 pixels (width="150")
image <img border="0" src="/images/[Link]" width="80" height="95"> : définit une image sans bordure (border=0"),
de hauteur 95 pixels (height="95"), de largeur 80 pixels (width="80") et dont le fichier source est
/images/[Link] sur le serveur web (src="/images/[Link]"). Ce lien se trouve sur un document web qui a
été obtenu avec l'URL [Link] Aussi, le navigateur demandera-t-il l'URL
[Link] pour avoir l'image référencée ici.
lien <a href="[Link] : fait que le texte ici sert de lien vers l'URL [Link]

fond de page <body background="/images/[Link]"> : indique que l'image qui doit servir de fond de page se trouve à l'URL
/images/[Link] du serveur web. Dans le contexte de notre exemple, le navigateur demandera l'URL
[Link] pour obtenir cette image de fond.

On voit dans ce simple exemple que pour construire l'intéralité du document, le navigateur doit faire trois requêtes au serveur :

1. [Link] pour avoir le source HTML du document


2. [Link] pour avoir l'image [Link]
3. [Link] pour obtenir l'image de fond [Link]

L'exemple suivant présente un formulaire Web créé lui aussi avec FrontPage.

Les bases de la programmation web 28


Le code HTML généré par FrontPage et un peu épuré est le suivant :
<html>

<head>
<title>balises</title>
<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//effacer
</script>
</head>
<body background="/images/[Link]">

<form method="POST" >

<table border="0">
<tr>
<td>Etes-vous marié(e)</td>
<td>
<input type="radio" value="Oui" name="R1">Oui
<input type="radio" name="R1" value="non" checked>Non
</td>
</tr>
<tr>
<td>Cases à cocher</td>
<td>
<input type="checkbox" name="C1" value="un">1
<input type="checkbox" name="C2" value="deux" checked>2
<input type="checkbox" name="C3" value="trois">3
</td>
</tr>
<tr>
<td>Champ de saisie</td>
<td>
<input type="text" name="txtSaisie" size="20" value="qqs mots">
</td>
</tr>
<tr>
<td>Mot de passe</td>
<td>
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
</td>

Les bases de la programmation web 29


</tr>
<tr>
<td>Boîte de saisie</td>
<td>
<textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
</td>
</tr>
<tr>
<td>combo</td>
<td>
<select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>choix2</option>
<option>choix3</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix simple</td>
<td>
<select size="3" name="lst1">
<option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix multiple</td>
<td>
<select size="3" name="lst2" multiple>
<option>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>bouton</td>
<td>
<input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
</td>
</tr>
<tr>
<td>envoyer</td>
<td>
<input type="submit" value="Envoyer" name="cmdRenvoyer">
</td>
</tr>
<tr>
<td>rétablir</td>
<td>
<input type="reset" value="Rétablir" name="cmdRétablir">
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur">

</form>
</body>
</html>

L'association contrôle visuel <--> balise HTML est le suivant :

Contrôle balise HTML


formulaire <form method="POST" >

champ de <input type="text" name="txtSaisie" size="20" value="qqs mots">


saisie

Les bases de la programmation web 30


champ de <input type="password" name="txtMdp" size="20" value="unMotDePasse">
saisie cachée
champ de <textarea rows="2" name="areaSaisie" cols="20">
saisie
multilignes ligne1
ligne2
ligne3
</textarea>

boutons radio <input type="radio" value="Oui" name="R1">Oui


<input type="radio" name="R1" value="non" checked>Non

cases à <input type="checkbox" name="C1" value="un">1


cocher
<input type="checkbox" name="C2" value="deux" checked>2
<input type="checkbox" name="C3" value="trois">3
Combo <select size="1" name="cmbValeurs">
<option>choix1</option>
<option select ed>choix2</option>
<option>choix3</option>
</select>
liste à <select size="3" name="lst1">
sélection
unique <option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
liste à <select size="3" name="lst2" multiple>
sélection
multiple <option>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
bouton de <input type="submit" value="Envoyer" name="cmdRenvoyer">
type submit
bouton de <input type="reset" value="Rétablir" name="cmdRétablir">
type reset
bouton de <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
type button

Passons en revue ces différents contrôles.

[Link] Le formulaire
formulaire <form method="POST" >
balise HTML <form name="..." method="..." action="...">...</form>
attributs name="frmexemple" : nom du formulaire
method="..." : méthode utilisée par le navigateur pour envoyer au serveur web les valeurs récoltées dans le
formulaire
action="..." : URL à laquelle seront envoyées les valeurs récoltées dans le formulaire.

Un formulaire web est entouré des balises <form>...</form>. Le formulaire peut avoir un nom (name="xx"). C'est
le cas pour tous les contrôles qu'on peut trouver dans un formulaire. Ce nom est utile si le document web contient
des scripts qui doivent référencer des éléments du formulaire. Le but d'un formulaire est de rassembler des

Les bases de la programmation web 31


informations données par l'utilisateur au clavier/souris et d'envoyer celles-ci à une URL de serveur web. Laquelle ?
Celle référencée dans l'attribut action="URL". Si cet attribut est absent, les informations seront envoyées à l'URL
du document dans lequel se trouve le formulaire. Ce serait le cas dans l'exemple ci-dessus. Jusqu'à maintenant,
nous avons toujours vu le client web comme "demandant" des informations à un serveur web, jamais lui
"donnant" des informations. Comment un client web fait-il pour donner des informations (celles contenues dans
le formulaire) à un serveur web ? Nous y reviendrons dans le détail un peu plus loin. Il peut utiliser deux méthodes
différentes appelées POST et GET. L'attribut method="méthode", avec méthode égale à GET ou POST, de la balise
<form> indique au navigateur la méthode à utiliser pour envoyer les informations recueillies dans le formulaire à
l'URL précisée par l'attribut action="URL". Lorsque l'attribut method n'est pas précisé, c'est la méthode GET qui est
prise par défaut.

[Link] Champ de saisie

champ de <input type="text" name="txtSaisie" size="20" value="qqs mots">


saisie
<input type="password" name="txtMdp" size="20" value="unMotDePasse">

balise HTML <input type="..." name="..." size=".." value="..">


La balise input existe pour divers contrôles. C'est l'attribut type qui permet de différentier ces différents contrôles
entre eux.
attributs type="text" : précise que c'est un champ de saisie
type="password" : les caractères présents dans le champ de saisie sont remplacés par des caractères *. C'est la
seule différence avec le champ de saisie normal. Ce type de contrôle convient pour la saisie des mots de passe.
size="20" : nombre de caractères visibles dans le champ - n'empêche pas la saisie de davantage de caractères
name="txtSaisie" : nom du contrôle
value="qqs mots" : texte qui sera affiché dans le champ de saisie.

[Link] Champ de saisie multilignes

champ de <textarea rows="2" name="areaSaisie" cols="20">


saisie
multilignes ligne1
ligne2
ligne3
</textarea>
balise HTML <textarea ...>texte</textarea>
affiche une zone de saisie multilignes avec au départ texte dedans
attributs rows="2" : nombre de lignes
cols="'20" : nombre de colonnes
name="areaSaisie" : nom du contrôle

[Link] Boutons radio

boutons radio <input type="radio" value="Oui" name="R1">Oui


<input type="radio" name="R1" value="non" checked>Non

Les bases de la programmation web 32


balise HTML <input type="radio" attribut2="valeur2" ....>texte
affiche un bouton radio avec texte à côté.
attributs name="radio" : nom du contrôle. Les boutons radio portant le même nom forment un groupe de boutons
exclusifs les uns des autres : on ne peut cocher que l'un d'eux.
value="valeur" : valeur affectée au bouton radio. Il ne faut pas confondre cette valeur avec le texte affiché à côté
du bouton radio. Celui-ci n'est destiné qu'à l'affichage.
checked : si ce mot clé est présent, le bouton radio est coché, sinon il ne l'est pas.

[Link] Cases à cocher


cases à <input type="checkbox" name="C1" value="un">1
cocher
<input type="checkbox" name="C2" value="deux" checked>2
<input type="checkbox" name="C3" value="trois">3

balise HTML <input type="checkbox" attribut2="valeur2" ....>texte


affiche une case à cocher avec texte à côté.
attributs name="C1" : nom du contrôle. Les cases à cocher peuvent porter ou non le même nom. Les cases portant le
même nom forment un groupe de cases associées.
value="valeur" : valeur affectée à la case à cocher. Il ne faut pas confondre cette valeur avec le texte affiché à
côté du bouton radio. Celui-ci n'est destiné qu'à l'affichage.
checked : si ce mot clé est présent, le bouton radio est coché, sinon il ne l'est pas.

[Link] Liste déroulante (combo)


Combo <select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>choix2</option>
<option>choix3</option>
</select>

balise HTML <select size=".." name="..">


<option [selected]>...</option>
...
</select>
affiche dans une liste les textes compris entre les balises <option>...</option>
attributs name="cmbValeurs" : nom du contrôle.
size="1" : nombre d'éléments de liste visibles. size="1" fait de la liste l'équivalent d'un combobox.
selected : si ce mot clé est présent pour un élément de liste, ce dernier apparaît sélectionné dans la liste. Dans
notre exemple ci-dessus, l'élément de liste choix2 apparaît comme l'élément sélectionné du combo lorsque celui-ci
est affiché pour la première fois.

[Link] Liste à sélection unique


liste à <select size="3" name="lst1">
sélection
unique <option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>

Les bases de la programmation web 33


<option>liste5</option>
</select>

balise HTML <select size=".." name="..">


<option [selected]>...</option>
...
</select>
affiche dans une liste les textes compris entre les balises <option>...</option>
attributs les mêmes que pour la liste déroulante n'affichant qu'un élément. Ce contrôle ne diffère de la liste déroulante
précédente que par son attribut size>1.

[Link] Liste à sélection multiple


liste à <select size="3" name="lst2" multiple>
sélection
unique <option selected>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>

balise HTML <select size=".." name=".." multiple>


<option [selected]>...</option>
...
</select>
affiche dans une liste les textes compris entre les balises <option>...</option>
attributs multiple : permet la sélection de plusieurs éléments dans la liste. Dans l'exemple ci-dessus, les éléments liste1 et
liste3 sont tous deux sélectionnés.

[Link] Bouton de type button


bouton de <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
type button

balise HTML <input type="button" value="..." name="..." onclick="effacer()" ....>


attributs type="button" : définit un contrôle bouton. Il existe deux autres types de bouton, les types submit et reset.
value="Effacer" : le texte affiché sur le bouton
onclick="fonction()" : permet de définir une fonction à exécuter lorsque l'utilisateur clique sur le bouton. Cette
fonction fait partie des scripts définis dans le document web affiché. La syntaxe précédente est une syntaxe
javascript. Si les scripts sont écrits en vbscript, il faudrait écrire onclick="fonction" sans les parenthèses. La
syntaxe devient identique s'il faut passer des paramètres à la fonction : onclick="fonction(val1, val2,...)"

Dans notre exemple, un clic sur le bouton Effacer appelle la fonction javascript effacer suivante :

Les bases de la programmation web 34


<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//effacer
</script>

La fonction effacer affich e un message :

[Link] Bouton de type submit


bouton de <input type="submit" value="Envoyer" name="cmdRenvoyer">
type submit

balise HTML <input type="submit" value="Envoyer" name="cmdRenvoyer">


attributs type="submit" : définit le bouton comme un bouton d'envoi des données du formulaire au serveur web.
Lorsque le client va cliquer sur ce bouton, le navigateur va envoyer les données du formulaire à l'URL définie dans
l'attribut action de la balise <form> selon la méthode définie par l'attribut method de cette même balise.
value="Envoyer" : le texte affiché sur le bouton

[Link] Bouton de type reset


bouton de <input type="reset" value="Rétablir" name="cmdRétablir">
type reset

balise HTML <input type="reset" value="Rétablir" name="cmdRétablir">


attributs type="reset" : définit le bouton comme un bouton de réinitialisation du formulaire. Lorsque le client va cliquer
sur ce bouton, le navigateur va remettre le formulaire dans l'état où il l'a reçu.
value="Rétablir" : le texte affiché sur le bouton

[Link] Champ caché


champ caché <input type="hidden" name="secret" value="uneValeur">

balise HTML <input type="hidden" name="..." value="...">


attributs type="hidden" : précise que c'est un champ caché. Un champ caché fait partie du formulaire mais n'est pas
présenté à l'utilisateur. Cependant, si celui-ci demandait à son navigateur l'affichage du code source, il verrait la
présence de la balise <input type="hidden" value="..."> et donc la valeur du champ caché.

Les bases de la programmation web 35


value="uneValeur" : valeur du champ caché.

Quel est l'intérêt du champ caché ? Cela peut permettre au serveur web de garder des informations au fil des
requêtes d'un client. Considérons une application d'achats sur le web. Le client achète un premier article art1 en
quantité q1 sur une première page d'un catalogue puis passe à une nouvelle page du catalogue. Pour se souvenir
que le client a acheté q1 articles art1, le serveur peut mettre ces deux informations dans un champ caché du
formulaire web de la nouvelle page. Sur cette nouvelle page, le client achète q2 articles art2. Lorsque les données de
ce second formulaire vont être envoyées au serveur (submit), celui-ci va non seulement recevoir l'information
(q2,art2) mais aussi (q1,art1) qui fait partie également partie du formulaire en tant que champ caché non modifiable
par l'utilisateur. Le serveur web va alors mettre dans un nouveau champ caché les informations (q1,art1) et (q2,art2)
et envoyer une nouvelle page de catalogue. Et ainsi de suite.

1.8.2 Envoi à un serveur web par un client web des valeurs d'un formulaire
Nous avons dit dans l'étude précédente que le client web disposait de deux méthodes pour envoyer à un serveur web les valeurs
d'un formulaire qu'il a affiché : les méthodes GET et POST. Voyons sur un exemple la différence entre les deux méthodes. Nous
reprenons l'exemple précédent et le traitons de la façon suivante :
1. un navigateur demande l'URL de l'exemple à un serveur web
2. une fois le formulaire obtenu, nous le remplissons
3. avant d'envoyer les valeurs du formulaire au serveur web en cliquant sur le bouton Envoyer de type submit, nous arrêtons le
serveur web et le remplaçons par le serveur TCP générique déjà utilisé précédemment. Rappelons que celui-ci affiche à
l'écran les lignes de texte que lui envoie le client web. Ainsi nous verrons ce qu'envoie exactement le navigateur.

Le formulaire est rempli de la façon suivante :

L'URL utilisée pour ce document est la suivante :

Les bases de la programmation web 36


[Link] Méthode GET
Le document HTML est programmé pour que le navigateur utilise la méthode GET pour envoyer les valeurs du formulaire au
serveur web. Nous avons donc écrit :

<form method="GET" >

Nous arrêtons le serveur web et lançons notre serveur TCP générique sur le port 81 :

E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique 81


Serveur générique lancé sur le port 81

Maintenant, nous revenons dans notre navigateur pour envoyer les données du formulaire au serveur web à l'aide du bouton
Envoyer :

Voici alors ce que reçoit le serveur TCP générique :

<-- GET /html/[Link]?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area


Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/[Link]-excel, */*
<-- Referer: [Link]
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Connection: Keep-Alive
<--

Tout est dans le premier entête HTTP envoyé par le navigateur :

<-- GET /html/[Link]?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area


Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

On voit qu'il est beaucoup plus complexe que ce qui avait été rencontré jusqu'à maintenant. On y retrouve la syntaxe GET URL
HTTP/1.1 mais sous une forme particulière GET URL?param1=valeur1&param2=valeur2&... HTTP/1.1 où les parami sont les noms
des contrôles du formulaire web et valeuri les valeurs qui leur sont associées. Examinons-les de plus près. Nous présentons ci -
dessous un tableau à trois colonnes :

 colonne 1 : reprend la définition d'un contrôle HTML de l'exemple


 colonne 2 : donne l'affichage de ce contrôle dans un navigateur
 colonne 3 : donne la valeur envoyée au serveur par le navigateur pour le contrôle de la colonne 1 sous la forme qu'elle a
dans la requête GET de l'exemple

contrôle HTML visuel valeur(s) renvoyée(s)

Les bases de la programmation web 37


R1=Oui
<input type="radio" value="Oui"
name="R1">Oui
- la valeur de l'attribut value du bouton
<input type="radio" name="R1" radio coché par l'utilisateur.
value="non" checked>Non

<input type="checkbox" name="C1" C1=un


value="un">1
<input type="checkbox" name="C2"
C2=deux
value="deux" checked>2 - valeurs des attributs value des cases
<input type="checkbox" name="C3" cochées par l'utilisateur
value="trois">3

<input type="text" name="txtSaisie" txtSaisie=programmation+web


size="20" value="qqs mots">
- texte tapé par l'utilisateur dans le champ
de saisie. Les espaces ont été remplacés
par le signe +

<input type="password" name="txtMdp" txtMdp=ceciestsecret


size="20" value="unMotDePasse">
- texte tapé par l'utilisateur dans le champ
de saisie

<textarea rows="2" name="areaSaisie" areaSaisie=les+bases+de+la%0D%0A


cols="20">
ligne1
programmation+web
ligne2 - texte tapé par l'utilisateur dans le champ
ligne3 de saisie. %OD%OA est la marque de fin
</textarea> de ligne. Les espaces ont été remplacés
par le signe +

<select size="1" name="cmbValeurs"> cmbValeurs=choix3


<option>choix1</option>
<option selected>choix2</option>
- valeur choisie par l'utilisateur dans la
<option>choix3</option> liste à sélection unique
</select>

<select size="3" name="lst1"> lst1=liste3


<option selected>liste1</option>
<option>liste2</option>
- valeur choisie par l'utilisateur dans la
<option>liste3</option> liste à sélection unique
<option>liste4</option>
<option>liste5</option>
</select>
<select size="3" name="lst2" multiple> lst2=liste1
<option selected>liste1</option>
<option>liste2</option>
lst2=liste3
<option selected>liste3</option> - valeurs choisies par l'utilisateur dans la
<option>liste4</option> liste à sélection multiple
<option>liste5</option>
</select>
<input type="submit" value="Envoyer" cmdRenvoyer=Envoyer
name="cmdRenvoyer">
- nom et attribut value du bouton qui a
servi à envoyer les données du formulaire
au serveur

<input type="hidden" name="secret" secret=uneValeur


value="uneValeur">
- attribut value du champ caché

Refaisons la même chose mais cette fois-ci en gardant le serveur web pour élaborer la réponse et voyons quelle est cette dernière.
La page renvoyée par le serveur Web est la suivante :

Les bases de la programmation web 38


C'est exactement la même que celle reçue initialement avant le remplissage du formulaire. Pour comprendre pourquoi, il faut
regarder de nouveau l'URL demandée par le navigateur lorsque l'utilisateur appuie sur le bouton Envoyer :

<-- GET /html/[Link]?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area


Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

L'URL demandée est /html/[Link]. On passe de plus à cette URL des valeurs qui sont celles du formulaire. Pour l'instant, l'URL
/html/[Link] qui est une page statique n'utilise pas ces valeurs. Si bien que le GET précédent est équivalent à

<-- GET /html/[Link] HTTP/1.1

et c'est pourquoi le serveur nous a renvoyé de nouveau la page initiale. On remarquera que le navigateur affiche bien lui l'URL
complète qui a été demandée :

[Link] Méthode POST


Le document HTML est programmé pour que le navigateur utilise maintenant la méthode POST pour envoyer les valeurs du
formulaire au serveur web :

<form method="POST" >

Nous arrêtons le serveur web et lançons le serveur TCP générique (déjà rencontré mais un peu modifié pour l'occasion) sur le port
81 :

E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique2 81


Serveur générique lancé sur le port 81

Les bases de la programmation web 39


Maintenant, nous revenons dans notre navigateur pour envoyer les données du formulaire au serveur web à l'aide du bouton
Envoyer :

Voici alors ce que reçoit le serveur TCP générique :

<-- POST /html/[Link] HTTP/1.1


<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/[Link]-excel, */*
<-- Referer: [Link]
<-- Accept-Language: fr
<-- Content-Type: application/x-www-form-urlencoded
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Content-Length: 210
<-- Connection: Keep-Alive
<-- Cache-Control: no-cache
<--
<--
R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprog
rammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur

Par rapport à ce que nous connaissons déjà, nous notons les changements suivants dans la requête du navigateur :

1. L'entête HTTP initial n'est plus GET mais POST. La syntaxe est POST URL HTTP/1.1 où URL est l'URL demandée
par le navigateur. En même temps, POST signifie que le navigateur a des données à transmettre au serveur.
2. La ligne Content-Type: application/x-www-form-urlencoded indique quel type de données va envoyer le navigateur.
Ce sont des données de formulaire (x-www-form) codées (urlencoded). Ce codage fait que certains caractères des données
transmises sont transformées afin d'éviter au serveur des erreurs d'interprétation. Ainsi, l'espace est remplacé par +, la
marque de fin de ligne par %OD%OA,... De façon générale, tous les caractères contenus dans les données et susceptibles
d'une interprétation erronée par le serveur (&, +, %, ...) sont transformés en %XX où XX est leur code hexadécimal.
3. La ligne Content-Length: 210 indique au serveur combien de caractères le client va lui envoyer une fois les entêtes HTTP
terminés, c.a.d. après la ligne vide signalant la fin des entêtes.
4. Les données (210 caractères) :
R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de
+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=E
nvoyer&secret=uneValeur

On remarque que les données transmises par POST le sont au même format que celle transmises par GET.

Y-a-t-il une méthode meilleure que l'autre ? Nous avons vu que si les valeurs d'un formulaire étaient envoyées par le navigateur avec
la méthode GET, le navigateur affichait dans son champ Adresse l'URL demandée sous la forme
URL?param1=val1&param2=val2&.... On peut voir cela comme un avantage ou un inconvénient :

 un avantage si on veut permettre à l'utilisateur de placer cette URL paramétrée dans ses liens favoris
 un inconvénient si on ne souhaite pas que l'utilisateur ait accès à certaines informations du formulaire tels, par exemple, les
champs cachés

Par la suite, nous utiliserons quasi exclusivement la méthode POST dans nos formulaires.

[Link] Récupération des valeurs d'un formulaire Web


Une page statique demandée par un client qui envoie de plus des paramètres par POST ou GET ne peut en aucune façon récupérer
ceux-ci. Seul un programme peut le faire et c'est lui qui se chargera alors de générer une réponse au client, une réponse qui sera
dynamique et généralement fonction des paramètres reçus. C'est le domaine de la programmation web, domaine que nous abordons

Les bases de la programmation web 40

Vous aimerez peut-être aussi