Programmation web
A.U. 2020-2021
(Support de cours)
CSCI361A
Université Libanaise Internationale
Pr. Moustapha Mohamed Saleck
2
1. HTML : Structure
Définitions :
Les pages web sont écrites en HTML (.htm ou .html) :
HyperText Markup Language
Ce qu’est HTML :
o Un langage descriptif : contenu de la page, description
des paragraphes, images, liens, tableaux…
o Pas de compilation : le navigateur reçoit le HTML,
l’interprête, et produit la page telle qu’affichée au client.
Toujours possible pour le client de consulter le code
HTML ! 3
1. HTML : Structure
Ce qu’HTML n’est pas :
o Un langage de programmation :
Pas de structures conditionnelles (« if …
then ... else »)
Pas de boucles (for, while, …)
o Pour programmer, il faudra utiliser un langage
de programmation côté client (javascript, flash…)
ou côté serveur (PHP, perl…)
4
1. HTML : Structure
Balise :
• Commande de mise en forme d’un texte ou d’un
autre objet du document Web (tableaux, images,
formulaires, …etc).
• Composants :
– Le nom de la balise (exemple : <b>).
– Les noms des attributs de la balise (exemple :
l’attribut align de la balise<p>).
–Les valeurs des attributs de la balise (exemple : <p
align = "center">). 5
1. HTML : Structure
Caractéristiques des balises HTML :
• Balise d’ouverture :
<Nom_balise Attribut1 = Valeur1 ….>
• Balise de fermeture :
</Nom_balise>
• Sensibilité à la casse :
- Pour écrire les noms des balises et de leurs
attributs, majuscules et minuscules sont équivalents.
- Ainsi la balise <a> est identique à la balise <A>.
Commentaires : 6
<!—Commentaires-->
1. HTML : Structure
Structure générale d’un document HTML :
• <HTML>
o Tout document HTML commence par
<HTML> et se termine par </HTML>.
• <HEAD>
o Zone pour spécifier le titre et les scripts du
document.
o Débute par <HEAD> et se termine par </HEAD>.
7
1. HTML : Structure
<TITLE>
• Définit le titre du document courant.
• Ce titre s’affichera dans la barre de titre de la
fenêtre du Browser.
• S’emboîte dans la balise <HEAD>.
• Se termine par la balise </TITLE>.
<BODY>
• Tout le reste du document se trouve dans
cette balise.
8
• Se termine par la balise </BODY>.
1. HTML : Structure
Exemple d’un document HTML « minimum » :
<HTML>
<HEAD>
<TITLE>Ma Page Web</TITLE>
</HEAD>
<BODY>
Bonjour, tout le monde !
</BODY>
</HTML>
9
1. HTML : Structure
Exemple de document HTML 5.0 minimal:
<!Doctype html> <- Le type de document
<html>
<head> <- En-tête : contient informations sur la page
<meta charset=”utf-8”/> <- Encodage utilisé : UTF-8 par défaut
<title>...</title> <- Titre de la page
</head>
<body> <- “Corps” du document
... <- Mettre ici le contenu du document
</body>
</html> 10
1. HTML : Structure
Les balises conteneurs contiennent :
- Du texte
- D’autres balises… parmi celles autorisées !
Par exemple, balises « bloc » (<div>, <h1>,
<p>,<form>, souvent les éléments qui commencent sur une
nouvelle ligne) et « en ligne » (<span>, <strong>, <img>, se
suivent comme du texte)
- Une balise bloc peut contenir d’autres balises bloc, des
éléments en ligne, du texte
- Un élément en ligne ne peut pas contenir de balise bloc 11
1. HTML : Structure
- Un élément en ligne ne peut pas contenir de balise bloc
- Balises peuvent contenir seulement certain types de
contenu, on verra ces types plus loin
- Utilisées pour présenter ou structurer le document
- Les balises vides : sont destinées à insérer un élément
hors du texte dans le document : séparateur (<hr />), saut de
ligne, saut de paragraphe…
12
2. HTML : Division
Balises pour les divisions :
• <Hn>….</Hn>
o L’entier n entre 1 et 6, indique le niveau du titre
dans le document.
o Provoque automatiquement un espace de type
nouveau paragraphe.
• <P>
o Définie un nouveau paragraphe.
o La balise de fermeture </P> n’est pas
13
obligatoire.
2. HTML : Division
• <BR>
o Indique que le texte doit débuter à partir de la
ligne suivante (saut de ligne).
o La balise de fermeture </BR> ne s’utilise pas.
• <HR>
o Balise de division graphique qui provoque un trait
horizontale sur toute ou partie de la largeur de la
fenêtre du Browser.
o Elle n’a pas de balise de fermeture.
14
2. HTML : Division
• Attributs de la balise <HR>
o SIZE : définit en pixels l’épaisseur du trait.
o WIDTH : définit, soit en pourcentage de la largeur
de la fenêtre, soit en valeur absolue (pixels) la longueur
du trait.
o ALIGN : définit une position pour le trait. Possède
trois valeurs.
» RIGHT : position à droite.
» LEFT : position à gauche.
15
» CENTER : position au centre.
2. HTML : Division
Exemple :
<HTML>
<HEAD>
<TITLE> Cours technologie du Web </TITLE>
</HEAD>
<BODY>
<H1>HTML</H1>
<P> Ce chapitre introduit les éléments de base du langage
HTML. Il contient trois parties : <BR>
<P> L'Internet
<P> Le Web
<P> Le langage HTML
<HR WIDTH = 50% SIZE = 2>
Responsable : MOUSTAPHA M.SALECK 16
</BODY>
</HTML>
3. HTML : Styles
Styles physiques :
<B>…</B>
o Affiche un texte en gras.
<I>…</I>
o Affiche un texte en italique.
<U>…</U>
o Affiche un texte en souligné.
<SUP>…</SUP>
o Affiche un texte comme exposant.
<SUB>…</SUB>
17
o Affiche un texte comme indice.
3. HTML : Styles
<BIG>…</BIG>
o Affiche un texte en taille maximale de
la police utilisée.
<SMALL>…</SMALL>
o Affiche un texte en taille minimale de
la police utilisée.
<TT>…</TT>
o Affiche un texte en caractères de type
machine à écrire.
18
3. HTML : Styles
Styles logiques :
<CITE>…</CITE>
o Pour afficher un texte en citation.
<CODE>…</CODE>
o Pour afficher un texte en code.
<DFN>…</DFN>
o Pour afficher une texte comme une
définition.
<EM>…</EM>
o Pour afficher un texte mis en valeur.
19
<KBD>…</KBD>
o Pour simuler la saisie d’un texte au clavier.
3. HTML : Styles
<SAMP>…</SAMP>
o Pour citer un texte en exemple.
<STRONG>…</ STRONG>
o Pour mettre un texte en valeur.
<VAR>…</VAR>
o Pour afficher un texte comme une variable.
<BLOCKQUOTE>…</ BLOCKQUOTE>
o Pour afficher un paragraphe comme une citation.
< ADDRESS>…</ADDRESS>
o Pour afficher un paragraphe comme une adresse ou une
20
signature.
3. HTML : Styles
Un exemple :
<HTML>
<HEAD>
<TITLE>Styles</TITLE>
</HEAD>
<BODY>
<H1>Des formules</H1>
<H2>H<SUB>2</SUB>O</H2>
<h2>(X+1)<SUP>2</SUP>=X<SUP>2</SUP>+
2X+1</H2>
</BODY>
</HTML> 21
4. HTML : Listes
Types de listes HTML :
• Listes descriptives.
• Listes régulières.
Balises pour listes régulières :
<LI>
o Précède chaque objet de la liste.
<LH>
o Permet d’affecter un en-tête à l’ensemble de la liste.
Syntaxe générale des listes régulières :
<Balise d’ouverture> 22
<LH> Élément d’en-tête
4. HTML : Listes
<LI>Élément de l’énumération
<LI>…
</Balise de fermeture>
Balise pour listes régulières ordonnées :
<OL TYPE = Valeur START = Valeur>
o START : définit la valeur de départ de la liste.
o TYPE : définit le type d’énumération.
Balise pour listes régulières ordonnées :
• Valeurs de l’attribut TYPE
o 1 : numérotation en chiffres arabes (1, 2, 3, …). 23
o A : numérotation en lettres majuscules (A,B, C, …).
4. HTML : Listes
o I : numérotation en chiffres romains (I, II, III,IV, …).
o i : numérotation en chiffres romains minuscules (i, ii, iii,
iv, …).
Balise pour listes régulières non ordonnées :
<UL TYPE = Valeur>
o TYPE : indique le type de la puce pour la liste.
o Valeurs possibles :
square : puce rectangle.
circle : puce cercle vide.
24
disc : puce cercle plein.
4. HTML : Listes
Exemple :
<HTML>
<HEAD>
<TITLE>Styles</TITLE>
</HEAD>
<BODY>
<LH><B> Exemples de Types de Bases de Données </B>
<UL TYPE = disc>
<LI> Hiérarchique
<LI> Relationnelle
<LI> Objet
</UL>
<LH><B> Exemples de SGBD </B>
<OL TYPE = i>
<LI> MS-Access
<LI> Oracle
<LI> O2 25
</OL>
</BODY>
</HTML>
4. HTML : Listes
Balises pour listes descriptives :
<DL>
o Définit une liste descriptive. Elle englobe les
autres balises (DT et DD).
<DT>
o Précède chaque item de la liste (qui ne doit
en aucun cas excéder une ligne).
<DD>
o Correspond à la zone de définition de l’item.
26
4. HTML : Listes
Exemple :
<HTML>
<HEAD> <TITLE>Styles</TITLE> </HEAD>
<BODY>
<DL><H1>Quelques langues du Web</H1>
<DT><B>HTML</B>
<DD>HyperText Markup Language
<DT><B>CSS</B>
<DD>Cascading Style Sheets
<DT><B>XML</B>
<DD>eXtensible Markup Language
<DT><B>XSLT</B>
<DD>eXtensible Style sheets Language Transformation
</DL> 27
</BODY>
</HTML>
5. HTML : Liens
Types de liens hypertextes :
o Liens externes : Accès vers un autre document (zone
cliquable).
o Liens internes : Point d’entrée dans le document courant
(zone non cliquable).
Les ressources accessibles via un lien hypertexte :
o Fichiers HTML, Images (GIF, JPEG ou PostScript),
Films, D’autres services Internet (ftp, mailto, telnet,
news, file, …etc).
28
5. HTML : Liens
La balise <A> :
• Attribut HREF
o Permet de définir l’adresse du document à atteindre.
o L’adresse peut être :
Une URL standard (cas d’un lien externe).
Une étiquette vers un point précis du document
(cas d’un lien interne).
• Attribut NAME
o Permet de nommer un point du document courant.
o Le nom doit être précédé par un symbole #. 29
5. HTML : Liens
Exemple :
<HTML>
<HEAD>
<TITLE>Liens HyperTextes</TITLE>
</HEAD>
<BODY>
<H1>Informations Personnelles</H1>
<B>Nom</B> : XXXXXX<BR>
<B>Prénom</B> : YYYYYY<BR>
<B>Site Web</B> : <A HREF = "
http://www.google.fr">www.My_site.fr</A><BR>
<B>Contacte</B> : <A HREF = " 30
mailto://xx_yy@gmail.com">xx_yy@gmail.com</A><BR>
5. HTML : Liens
<B>Télécharger mon CV</B> : <A HREF =
"ftp://www.My_site.fr/Index/cv.pdf">Mon CV</A><BR>
<HR></HR>
<H1>Langages de Programmation</H1>
<B>C++</B></BR>
<B>Java</B></BR>
<B>Python</B></BR>
<B>Assembleur 8000</B></BR>
<HR></HR>
<P><A HREF = "#top">Remonter vers le haut</A>
</BODY>
</HTML>
31
6. HTML : Images
Types d’images à inclure dans un document HTML :
• Images en ligne
o Elles apparaissent automatiquement dans la fenêtre
du Browser lors du chargement de la page HTML.
o Elles sont généralement au format GIF ou JPEG.
• Images externes
o Elles sont des fichiers graphiques pointés par des
liens hypertexte.
La balise <IMG> :
• Attribut SRC
32
o Permet d’inclure une image en ligne.
o Valeurs possibles : adresses URL.
6. HTML : Images
• Attribut ALT
o Permet de spécifier un texte de substitution pour les
browsers non graphiques.
• Attribut ALIGN
o Avec les valeurs TOP, BOTTOM ou MIDDLE, il
permet d’aligner l’image sur une ligne de texte.
o Avec les valeurs LEFT et RIGHT, il permet de faire
flotter l’image à gauche ou à droite dans un texte.
• Attribut WIDTH
o Permet de définir la largeur de l’image (en pixels). 33
6. HTML : Images
• Attribut HEIGHT
o Permet de définir la hauteur de l’image (en pixels).
• Attribut BORDER
o Permet de définir l’épaisseur du trait ordant
l’image (la valeur est un entier, 0 si l’on veut
supprimer la bordure).
• Attribut HEIGHT
o Permet de définir la hauteur de l’image (en pixels).
• Attribut VSPACE
o Permet de définir l’espace vertical entre le texte et 34
la bordure supérieure de l’image (en pixels).
6. HTML : Images
• Attribut HSPACE
o Permet de définir l’espace horizontal entre le texte et
la bordure gauche de l’image (en pixels).
Les images en guise d’ancres :
• <A HREF = …><IMG SRC = …></A>
o Permet de rendre une image cliquable, c’est-à-dire,
effectue un lien hypertexte avec une image.
35
6. HTML : Images
Exemple :
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<H1>Roi des animaux</H1>
<P>C'est le lion : <IMG SRC = "lion.jpg" ALIGN = "bottom"
WIDTH = 100 HEIGHT = 100> <HR>
<H1>Ami du Roi des animaux</H1>
<P>Peut être plus ruse que le roi, c'est le <A HREF =
"tigre.jpg"><IMG SRC = "tigre.jpg"
WIDTH = 100 HEIGHT = 100></A>
36
</BODY>
</HTML>
7. HTML : Mise en page
Éléments de mise en page d’un document Web :
• Caractères de textes
o Taille, couleur, et police.
• Colonnes de textes
o Nombre de colonnes, taille d’une colonne et
espace inter-colonne.
• Espacements
o Sens de l’espacement, taille et alignement des
espaces entre les objets d’un document HTML.
• Centrage des éléments
37
o Centrage du texte, des images, ou des éléments
d’un formulaire.
7. HTML : Mise en page
• Retours à la ligne
o Effets sur les images.
• Corps du document
o Fonds d’écran, couleur du fond, couleur du texte
qui ne fait pas partie d’un lien hypertexte et
couleur du texte faisant partie d’un lien
hypertexte.
Couleur des caractères :
• La balise <FONT>…</FONT>
o Attribut SIZE : définit la taille des caractères de 38
texte.
7. HTML : Mise en page
o Deux modes de mesure :
Taille absolue : n un entier entre 1 et 7, par défaut c’est
3.
Taille relative : +n ou –n, on définit la taille par rapport
à la taille courante.
o Attribut COLOR : définit la couleur des caractères de
texte.
o Deux modes pour nommer les couleurs :
Par nom : BLACK, RED, GREEN, BLUE, YELLOW, …etc.
Par code RGB : #XXYYZZ, où XX (respectivement YY et ZZ)
39
est un code hexadécimal entre 00 et FF (256 valeurs
chacun, soit de 0 à 255).
7. HTML : Mise en page
o Attribut FACE : définit la police des caractères de
texte.
o On donne la valeur sous forme d’un vecteur de polices
pour indiquer des polices de remplacement.
o Exemples :
Arial, Helvetica, sans-serif
Courier New, Courier, mono
Colonage de texte :
• La balise <MULTICOL>…</MULTICOL>
o Attribut COLS : définit le nombre de colonnes du 40
texte (une entier n).
7. HTML : Mise en page
o Attribut WIDTH : définit la largeur d’une colonne en
pixels.
o Attribut GUTTER : définit la taille de la gouttière en
pixels, c’est-à-dire la taille de l’espace interc-olonne
Centrage des éléments :
• La balise <CENTER>…</CENTER>
o Permet de centrer, dans le sens horizontal de la page,
un bloc de texte, des images ou les éléments d’un
formulaire.
o Elle affecte tous les objets jusqu’apparaisse la balise 41
</CENTER>
7. HTML : Mise en page
Espacement :
• La balise <SPACER>
o Attribut TYPE : permet de préciser si l’on agit
horizontalement (HORIZONTAL), verticalement
(VERTICAL) ou dans les deux sens (BLOCK).
o Attribut SIZE : permet de spécifier la taille de
l’espacement en pixels dans le cas de l’utilisation de
TYPE = HORIZONTAL ou TYPE = VERTICAL.
o Attribut WIDTH : permet de spécifier la largeur d’un
bloc dans le cas de l’utilisation de TYPE = BLOCK.
42
o Attribut HEIGHT : permet de spécifier la hauteur d’un
bloc dans le cas de l’utilisation de TYPE = BLOCK.
7. HTML : Mise en page
o Attribut ALIGN : permet de spécifier la position d’un bloc
dans le cas de l’utilisation e TYPE = BLOCK.
o Valeurs possibles de l’attribut ALIGN :
TOP : alignement du sommet du bloc avec les objets qui
l’encadrent.
BOTTOM : alignement de la base du bloc avec les objets
qui l’encadrent.
CENTER ou MIDDLE : alignement du centre du bloc avec
les objets qui l’encadrent.
43
7. HTML : Mise en page
La balise <BR> et l’attribut CLEAR :
• La balise <BR>
o En l’absence de cette balise, le texte coule naturellement
entre l’image et le bord de la page.
o Attribut CLEAR : permet de laisser blanc l’espace entre
une image et le reste de la page.
o Il possède trois valeurs :
RIGHT : pour empêcher le texte de couler sur la gauche d’une
image située à droite
LEFT : pour empêcher le texte de couler sur la droite d’une
image située à gauche. 44
ALL : pour empêcher le texte de couler entre deux images,
l’une située à droite et l’autre à gauche de la page.
7. HTML : Mise en page
Quelques attributs de la balise <BODY> :
• L’attribut BGCOLOR :
o Permet de définir une couleur de fond de la page. Par
défaut, il a la valeur "white« (page blanche).
• L’attribut BACKGROUND :
o Permet de spécifier une image comme arrière-paln
de la page.
• L’attribut TEXT :
o Permet de spécifier une couleur du texte dans le
corps du document. 45
7. HTML : Mise en page
• L’attribut LINK :
o Permet de définir une couleur des liens non
encore visités.
• L’attribut VLINK :
o Permet de définir une couleur des liens déjà
visités.
• L’attribut ALINK :
o Permet de définir une couleur du lien au moment
du clic.
46
7. HTML : Mise en page
Exemple :
<HTML>
<HEAD>
<TITLE>Mise en pages</TITLE>
</HEAD>
<BODY background = "tigre.jpg">
<H1>Texte blanc</H1>
<FONT COLOR = "white" SIZE = 7> Ceci est un texte de
couleur blanche.
</BODY>
</HTML>
47
7. HTML : Tableaux
Balise d’en-tête pour définir un tableau :
• <TABLE>…</TABLE>
o Définit un tableau à deux dimensions (tableaux avec
des lignes et des colonnes).
• Attributs de la balise <TABLE>
o BORDER : définit l’épaisseur du cadre extérieur du
tableau.
o WIDTH : définit la largeur du tableau relativement
à la largeur de la fenêtre du Browser.
• <Attributs de la balise <TABLE>
48
CELLPADING : définit en pixels l’espace autour
du texte d’une cellule.
8. HTML : Tableaux
CELLSPACING : définit en pixels l’espace entre les cellules.
ALIGN : définit l’alignement du tableau par rapport à la fenêtre du
Browser. Valeurs possibles : LEFT, CENTER ou RIGHT.
CAPTION : définit un titre pour le tableau.
BGCOLOR : affecte une couleur de fond à un tableau.
BACKGROUND : permet d’insérer une image d’arrière-plan dans la
surface d’un tableau.
Description des lignes d’un tableau :
• Balise <TR>…</TR>
o Permet d’ajouter une ligne au tableau.
• Attributs de la balise <TR>
o ALIGN : définit l’alignement horizontale du texte à
49
l’intérieur de toutes les cellules de la ligne du tableau.
Valeurs possibles : LEFT, CENTER ou RIGHT.
8. HTML : Tableaux
o VALIGN : définit l’alignement verticale du texte à
l’intérieur de toutes les cellules de la ligne du tableau.
Valeurs possibles : TOP, MIDDLE ou BOTTOM.
Description des cellules d’un tableau :
• Balise <TD>…</TD>
o Permet d’ajouter une cellule au tableau.
• Attributs de la balise <TD>
o ALIGN : définit l’alignement horizontale du texte à
l’intérieur d’une cellule. Valeurs possibles : LEFT, CENTER
ou RIGHT.
o VALIGN : définit l’alignement verticale du texte à l’intérieur 50
d’une cellule du tableau. Valeurs possibles : TOP, MIDDLE
ou BOTTOM.
8. HTML : Tableaux
o COLSPAN et ROWSPAN : définissent un fractionnement
de la cellule courante en plusieurs sous-cellules.
o NOWRAP : empêche de divise la cellule en plusieurs
lignes.
Description des cellules d’en-tête d’un tableau :
• Balise <TH>…</TH>
o Cette balise les mêmes attributs que ceux de la balise <TD>.
51
8. HTML : Tableaux
Exemple :
<HTML>
<HEAD>
<TITLE>Tableaux</HTML>
</HEAD>
<BODY>
<H1>Payés du Maghreb Arabe</H1>
<TABLE BORDER = 2 BGCOLOR = magenta>
<CAPTION ALIGN = bottom><B>Statistiques 2005</B>
</CAPTION>
<TR><TH>Nation</TH><TH>Capitale</TH>
<TH>Population</TH></TR> 52
<TR> <TD>Maroc</TD><TD>Rabat</TD>
<TD> 30 millions</TD> </TD>
8. HTML : Tableaux
<TR>
<TD>Algérie</TD> <TD>Alger</TD>
<TD>25 millions</TD></TD>
<TR>
<TD>Tunesie</TD><TD>tunese</TD>
<TD>19millions</TD></TD>
<TR>
<TD>libyé</TD><TD>Teripolli</TD>
<TD>4,5 millions</TD></TR>
<TR><TD>Mauritanie</TD><TD>Nwaquchote</TD>
<TD>8,7 millions</TD></TD>
</TABLE>
53
</BODY>
</HTML>
9. HTML : Frames (Cadres)
Balises pour les frames :
• <FRAMESET> … </FRAMESET> :
o Il est possible, grâce à cette balise, de partitionner
l’espace d’un document html en des zones appelées
cadres (frames).
• Attributs de la balise :
o COLS : indique le nombre et les tailles relatives des
colonnes du cadre (cas d’une partition en colonnes).
o ROWS : indique le nombre et les tailles relatives des
lignes du cadre (cas d’une partition en lignes). 54
9. HTML : Frames (Cadres)
Exemple :
• <FRAMESET ROWS = "75, *"> :
o Définit deux cadres horizontales, dont les hauteurs
sont :
de 75 pixels pour le 1er cadre.
le reste de la fenêtre pour le second
• <FRAMESET COLS = "50%, 60, *"> :
o Définit trois cadres horizontales, dont les largeurs
sont :
50% de la fenêtre pour le 1er cadre.
60 pixels pour le second. 55
le reste de la fenêtre pour le second.
9. HTML : Frames (Cadres)
Balises pour les frames :
• <FRAME … /> :
o Définit les propriétés d’un cadre spécifique.
• Attributs de la balise :
o SRC : indique l’adresse URL de la page (contenu)
qui sera affichée dans le cadre.
o NAME : affecte un nom au cadre. Ce nom sera
utilisé avec l’attribut TARGET d’un lien
hypertexte.
o SCROLLING : indique si le cadre sera doté d’une
56
barre de défilement. Valeurs : YES, NO, AUTO.
9. HTML : Frames (Cadres)
• Attributs de la balise :
o MARGINHEIGHT : indique la hauteur en pixels de la
marge supérieure du cadre.
o MARGINWIDTH : indique la largeur en pixels de la
marge gauche du cadre.
o FRAMEBORDER : indique l’épaisseur de la bordure
qui entoure le cadre.
57
10. HTML : Les Formulaires
Objectif
• Permettre à l’utilisateur d’envoyer des informations à un
serveur
• Saisir les informations
listes déroulantes, cases à cocher, zones de texte, etc.
bouton pour remettre à zéro
• Envoyer les informations
méthode GET :
- les informations passent par l’URL
- Ex.http://www.google.com/search?sourceid=mozclient&ie 58
=utf-8&oe=utf8&q=html+4.01
10. HTML : Les Formulaires
méthode Post :
- les informations sont échangées par le protocole HTTP
Eléments
• <form>…. </form> Définit un formulaire
• <input>….</input> Entrée de formulaire
• <testarea>…. </testarea> Zone de texte
• <select>…. </select> Liste déroulante
• <option>…. </option> Option du select
59
10. HTML : Les Formulaires
Exemple :
<HTML>
<HEAD>
<TITLE>Formulaire</HTML>
</HEAD>
<BODY>
<form method="post" action="http://serveur.com/script.php">
<p><input type="text" name="Champ_saisie" value="Texte"/></p>
<p><select name="Liste_Choix" size="3">
<option value="Option_1">Option_1</option>
<option value="Option_2">Option_2</option>
<option value="Option_3">Option_3</option>
</select>
<textarea name="Zone_Texte" cols="30" rows="5"> Texte par défaut
60
</textarea></p>
<p><input type="checkbox" name="case1" value="Case_1">
Case à cocher 1<br />
10. HTML : Les Formulaires
<input type="checkbox" name="case2" value="Case_2">
Case à cocher 2<br />
<input type="checkbox" name="case3" value="Case_3">
Case à cocher 3<br /></p>
<p><input type="radio" name="Case_Radio" value="Case radio 1">
Case radio 1<br />
<input type="radio" name="Case_Radio" value="Case radio 2">
Case radio 2<br />
<input type="radio" name="Case_Radio" value="Case radio 3">
Case radio 3<br /></p>
<input type="reset" name="Annulation" value="Annuler">
<input type="submit" name="Soumission" value="Soumettre">
</form>
</BODY> 61
</HTML>
10. HTML : Les Formulaires
62
