Le Langage HTML - unidentified

Transcription

T-GSI
STAGE RENOVATION
- HTML.Chapitre 3 -
Le Langage HTML,
:: Partie 3 ::
Sources du document :
•
•
•
•
•
Livre d’Eric Crepin Conception de site Internet Intranet ;
Le consortium W3C (texte de référence HTML 4.01 du 18 décembre 1997) ;
Le site ALL WEB ;
Le site ALL HTML ;
Magazine Compétence Micro n° 9 et 16.
Autres sources données à titre de bibliographie :
•
•
•
•
Le site de Didier cabuzel ;
Le site devparadise ;
Le site WebDeveloper;
Magazine Linux Pratique HS juin-juillet 2005, Développement Web.
Olivier Mondet
http://unidentified-one.net
A. Commandes multimédia
Les commandes suivantes supposent que le visiteur de la page disposera d’un équipement minimum
(carte son, carte vidéo). Lors de leur activation les sons ou les images sont exécutés grâce aux clients
multimédias installés : Lecteur multimédia Windows, Real Player, Quick Time Player, ActiveMovie,
Winamp pour les plus couramment utilisés.
Les formats qui sont
Pour la vidéo
Pour le son
Pour la musique
les plus utilisés sont :
.avi, .mov, .mpg (mpeg)
.wav, .au
.mid, .ar, .mp3, .rm, .ram
A.1. Les événements déclenchés par les visiteurs
(On supposera que les fichiers multimédias sont stockés dans le répertoire /multimédia.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Pages musicales</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</HEAD>
<BODY>
<A HREF="multimedia/son.wav">Ecouter mon son</A>
<BR />
<A HREF="multimedia/musique.mid">Ecouter ma mélodie</A>
<BR />
<A HREF="multimedia/video.avi">Regarder ma video</A>
</BODY>
Ch.3 - Le Langage HTML, Partie 3.doc
page 1 / 22
om (2001-2006)
</HTML>
Les liens activeront les lecteurs multimédias par défaut il suffira de préciser vouloir ouvrir le fichier à
partir de son emplacement actuel.
A.2. Les événements automatiques
On peut activer automatiquement des effets sans demander l’avis du visiteur.
<HTML>
<HEAD>
<TITLE>Pages musicales forcées</TITLE>
</HEAD>
<BODY>
<EMBED SRC="multimedia/musik.mid" AUTOSTART=″TRUE″ HIDDEN=″TRUE″ LOOP=″INFINITE″
LOOP=″1000″ />
</BODY>
</HTML>
SRC="fichier"
AUTOSTART= TRUE | FALSE
HIDDEN= TRUE | FALSE
LOOP=n | INFINITE
EMBED
Définit l’URL ou le chemin du fichier.
Décide si le fichier est lancé automatiquement.
Décide si un petit panneau média doit être affiché pendant l’action.
Définit le nombre de fois que le fichier doit être réinitialisé. INFINITE
signifie sans arrêt dans IE.
Lance automatiquement la commande.
Avec affichage d’une image formatée du lecteur :
<HTML>
<HEAD>
<TITLE>Pages musicales forcées</TITLE>
</HEAD>
<EMBED SRC="multimedia/musik.mid" WIDTH=″145″ HEIGHT=″160″ AUTOSTART=″FALSE″
HIDDEN=″FALSE″ />
</BODY>
</HTML>
page 2 / 22
om (2001-2006)
Exemple avec une image :
<HTML>
<HEAD>
<TITLE>Pages avec vidéo</TITLE>
</HEAD>
<EMBED SRC="multimedia/video.avi" WIDTH=″100″ HEIGHT=″100″ AUTOSTART=″TRUE″ LOOP=″1000″
/>
</BODY>
</HTML>
B. Les images réactives
En plus des images cliquables HTML offre la possibilité de segmenter une image en plusieurs zones
réactives (chacune de ces zones renfermant un lien hypertexte).
Ce sont des images dont différentes zones, agissent comme des liens hypertextes. Chaque zone renvoi
vers un lien différent.
Note : pour réaliser des image-maps, votre logiciel de retouche d'image doit vous fournir les
coordonnées en x et y des zones que vous voulez définir (sous Windows, Paint le fait aussi très bien).
page 3 / 22
om (2001-2006)
B.1. Déclarer une image en image-map
Déclarer une image comme utilisant un map est simple : il suffit d'ajouter l'attribut
USEMAP="#nomMap" dans la balise <IMG />. Le nom donné au map est libre, mais n'oubliez pas le
signe dièse (#) qui le précède (c'est le même principe que pour les ancres).
Il suffit d'indiquer au navigateur le chemin pour trouver le map en question. La plupart du temps, on
définit le map juste après l'implémentation de l'image-map, ou à la fin du fichier contenant l'imagemap.
Soit par exemple une image dont la zone du centre servira de lien hypertexte
pour aller sur une autre page (fictive pour notre exemple).
Quand le visiteur cliquera sur l’étoile il aura accès à une autre page :
<HTML>
<HEAD>
<TITLE>Pages avec zones réactives</TITLE>
</HEAD>
<BODY>

<MAP NAME="imagemenu">
<AREA SHAPE=″CIRCLE″ COORDS="53,51,35 " HREF="page1.html" TITLE="Menu Principal" />
</MAP>
<IMG SRC="images/etoile.jpg" WIDTH=″100″ HEIGHT=″100″ BORDER=″0″ ALIGN=″BOTTOM″
USEMAP="#imagemenu" />
</BODY>
</HTML>
page 4 / 22
om (2001-2006)
En cliquant dans la zone délimitée par le cercle on voit s’afficher le chemin du lien dans le bas de la
fenêtre.
B.2. Définir le MAP
Il vous faut un moyen d'obtenir les coordonnées en x et y pour les différentes zones que vous voulez
définir. La plupart des logiciels de graphisme ont aujourd'hui cette option.
Il est possible de définir différentes formes de zones actives :
Rectangulaire :
SHAPE=RECT
On définit alors les coordonnées du point en haut à gauche en x puis en y,
puis le point en bas à droite en x puis en y. Ce qui donne : COORDS="x1,
y1, x2, y2"
Cercle : SHAPE=CIRCLE
On définit le centre du cercle puis le rayon en pixels. On obtient donc :
COORDS="x1, y1, rayon"
Polygone :
SHAPE=POLY
On définit les coordonnées en x et y pour chaque point du polygone
(comme pour le rectangle, mais il y a plus de points). Ce qui donne :
COORDS="x1, y1, x2, y2,…"
Remarque : on peut aussi utiliser les formes suivantes qui ne fonctionnent pas sur tous les
navigateurs.
OVAL
DEFAULT
Point supérieur gauche et point inférieur droit du rectangle
incluant l’ellipse
Concerne le reste de l’image.
Les zones réactives ont les options suivantes :
HREF="Lien" Hyperlien associé à la zone réactive.
TARGET
Affiche l’hyperlien.
TITLE
Affiche une info-bulle pour les zones réactives (avec IE, notamment).
ALT
Affiche une info-bulle pour mes zones réactives (Netscape).
Exemple avec plusieurs zones sur une même image :
Ici les zones ont des formes différentes et obligent à utiliser :
• Rectangles (RECT),
• Cercles (CIRCLE),
• et polygones (POLY).
page 5 / 22
om (2001-2006)
<HTML>
<HEAD>
<TITLE>Pages avec zones réactives</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
</HEAD>
<BODY>

<MAP NAME=″Image″>
<AREA SHAPE=″RECT″ COORDS=″24,16,162,68″
HREF=″page1.html#jaune″ />
<AREA SHAPE=″CIRCLE″ COORDS=″38,133,27″
HREF=″page1.html#rouge″ />
<AREA SHAPE=″RECT″ COORDS=″19,189,158,237″
HREF=″page1.html#vert″ />
<AREA SHAPE=″POLY″ COORDS=″99,108 124,108 124,77 148,77
148,108 173,108 173,135 148,135 148,163 124,163 124,135
99,135″ HREF=″page1.html#noir″ />
</MAP>

<IMG SRC=″images/image1.jpg" BORDER=″0″ WIDTH=″200″
HEIGHT=″268″ NAME="image cliquable" USEMAP=″#Image″ />
</BODY>
</HTML>
B.3. Autre exemple un menu
Cette image, faite à l’aide d’un logiciel de retouche d’image, comporte plusieurs titres : "Les pages de
Michel" "Présentation", "E-mail", "Ca m’intéresse", "Mes liens", "Mes photos". Après avoir noté les
références des titres on peut créer la map.
<HTML>
<HEAD>
<TITLE>Pages de Michel le retour</TITLE>
</HEAD>
<BODY>
<MAP NAME="menu">
<AREA SHAPE=RECT COORDS="8,27,208,60" HREF="lien1.html" />
</MAP>
<DIV ALIGN=″CENTER″>
<IMG SRC="images/menu.gif" BORDER=″0″ WIDTH=″580″ HEIGHT=″84″ ALIGN=″BOTTOM″
USEMAP="#menu" />
</DIV>
</BODY>
</HTML>
page 6 / 22
om (2001-2006)
C. Référencer et déclarer ses pages
C.1. Référencer ses pages grâce aux balises META
Face à la taille et à la complexité du World Wide Web il devient fondamental non seulement de
développer des sites intéressants et attrayants, mais aussi de veiller à les faire connaître aux surfeurs,
et aux moteurs de recherche.
HTML permet de référencer chaque document en fonction de différents critères grâce à la balise
<META>.
<HTML>
<HEAD>
<TITLE>référence de document</TITLE>
<META NAME="Author" LANG="fr" CONTENT="Loulou" />
<META NAME="Description" CONTENT="Trucs et astuces en HTML" />
<META NAME="Keywords" CONTENT="Informatique,HTML,WWW,Java,Javascript,VBScript" />
<META HTTP-EQUIV="Expires" CONTENT="Le 1 juin 1998" />
<META HTTP-EQUIV="Refresh" CONTENT="5; URL=javascript04.html" />
</HEAD>
<BODY>
<CENTER>
<FONT SIZE=″+3″>Patience ce fichier est redirigé !</FONT>
</CENTER>
</BODY>
</HTML>
page 7 / 22
om (2001-2006)
HTTP-EQUIV
Author
Description
Keywords
Expires
Refresh
Robots
description
définit le nom de l’auteur.
définit un texte de description du document.
définit les mots clés qui caractérisent le document (chaque mot clé est séparé du
suivant par une virgule).
définit la date à partir de laquelle le navigateur doit recharger la page à partir du
serveur, et ne pas la charger à partir du cache.
définit une redirection (au bout de 5 secondes dans notre exemple) vers une autre
URL après un temps en seconde (ceci peut être très utile en maintenance de site, et
en particulier lors du déplacement de fichiers). On utilise également cet attribut
pour rafraichir la page affichée (lorsqu’on a des bandeaux publicitaires par
exemple…).
indique aux moteurs la façon d’indexer la page (index ou noindex) et si les moteurs
doivent suivre ou pas les liens de la page (follow ou nofollow). Les attributs All ou
None permettent une indexation totale ou aucune indexation.
Il existe beaucoup d'autres balises META (Copyright, Publisher, Generator, Date, Content-Type,
Identifier-URL…). En demandant l'affichage des sources des documents que vous consultez, vous en
rencontrerez sûrement.
Exemple : En-tête du site du Certa :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" content="Réseau pour l'accompagnement des enseignements
d'informatique de gestion">
<meta name="keywords" content="CERTA, réseau, informatique, gestion, ressources">
<meta name="Title" content="Réseau national CERTA">

C.2. Déclarer le type de document HTML
La déclaration de la version supportée avec la balise <DOCTYPE> :
Cette dernière doit se situer « normalement » au début de tous vos documents, mais on l’oublie dans
les trois quarts des cas : La preuve c’est uniquement dans ce chapitre qu’on la mentionne.
Cette déclaration est primordiale et a un caractère obligatoire en XHTML et en XML !

<DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> : il s'agit de la version 4, sans support des éléments
des versions précédentes ;

<DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
TRANSITIONAL//EN"
"http://www.w3.org/TR/html4/loose.dtd"> : il s'agit de la version 4 avec support des anciennes
versions de html ;

<DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
FRAMESET//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> :
S'applique
aux
fichiers
gérant
le
multifenêtrage.
N.B. : "EN" signifie que le HTML est en anglais
Exemple : En-tête du site du Certa :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
page 8 / 22
om (2001-2006)
Exemple : Déclaration d’une page en XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
D. Les formulaires
Comme nous l’avons vu, issu du SGML, le HTML a permis au départ d’échanger des pages dont le
contenu était définitivement figé ; pour échanger de l’information dynamique les internautes étaient
obligés d’utiliser d’autres services Internet comme la messagerie (e-mail).
Cet état de fait n’était en aucun cas satisfaisant en particulier pour une utilisation professionnelle.
L’apparition des formulaires HTML a permis de fournir une interface dynamique aux documents du
Web, permettant par exemple d’envoyer les informations contenu dans un formulaire vers une
messagerie, ou encore vers des programmes exécutables capables d’y répondre, et même d’interroger
des bases de données...
Afin de collecter des informations et échanger avec les serveurs il faut utiliser des scripts CGI
(Common Gateway Interface). Les scripts CGI représentent un lien entre la saisie de l’utilisateur et les
programmes qui fonctionnent sur les serveurs Web. Généralement les CGI sont en relation avec une
base de données qui permet le stockage physique des informations ou la consultation de données.
D.1. Définition d'un formulaire
Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases à
cocher...), il faut déclarer au navigateur qu'il devra gérer des formulaires et ce qu'il devra en faire.
La structure du formulaire est délimitée par les balises HTML :
<FORM paramètres> </FORM>
<HTML>
<HEAD>
<TITLE>Formulaires HTML</TITLE>
</HEAD>
<BODY>

<FORM METHOD=″POST″ ACTION="URL d'expédition" ENCTYPE="text/plain" ID=″f1″ NAME=″f1″>
... les formulaires proprement dit ...
</FORM>
<!—fin du formulaire -->
</BODY>
</HTML>
Les attributs NAME et ID ne sont pas identiques, même s’ils possèdent la même valeur seul l’ID
demeurera en XHTML car il s’agit d’un identifiant unique désignant un élément précis.
page 9 / 22
om (2001-2006)
Les paramètres :
METHOD= GET | POST
ACTION="URL"
ENCTYPE="text/plain"
La différence entre ces deux méthodes repose sur la façon dont les données
seront transmises au serveur et exploitées par celui-ci. Avec le temps, la
méthode post s'est imposée car elle apparaît plus efficace et permet le
traitement d'une quantité plus importante de données.
METHOD="GET"
les informations transmises sont ajoutées à l’URL
(paramètres à traiter par la ressource CGI) récupérable par la variable
d’environnement QUERY_STRING dont la taille est limitée à 200 caractères.
Ou
METHOD="POST" les informations sont transmises indépendamment de
l’URL sous forme d’envoi de message, la taille en caractère est reçu par la
ressource CGI dans la variable d’environnement CONTENT_LENGTH, et les
caractères sont récupérés sur l’entrée standard.
Spécifie l'adresse d'expédition des données. Dans le cas d'un traitement des
données par une CGI, on spécifie le répertoire CGI du serveur et le nom de
la CGI.
Spécifie l'encodage utilisé pour le contenu du formulaire. Ce paramètre ne
peut être utilisé qu'accompagné par la méthode post.
Ainsi ENCTYPE="text/plain" encode le contenu du formulaire en format
texte lisible par le destinataire. Il n'est pas inutile de prévoir l'attribut
NAME="nom" si la page comporte plusieurs formulaires ou des JavaScripts.
Remarque :
Dans le cas de l'utilisation en interne des formulaires par du Javascript, les attributs METHOD, action
et ENCTYPE sont inutiles car on ne fait pas appel au serveur (le Javascript est lancé au niveau du
navigateur lui-même).
D.2. Zones de formulaire
D.2.1. Les zones de texte
Les zones de texte sont aussi appelées champs de saisie : INPUT TYPE=TEXT indique un champ de
saisie d'une seule ligne.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=TEXT NAME="nom" size="50" />
</FORM>
</BODY>
</HTML>
page 10 / 22
om (2001-2006)
Remarque : ce formulaire est inutilisable d’un point de vue concret n’ayant pas de bouton de
validation.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="http://MonServeur.fr/MonRepretoireExecutable/MonFichier.exe"
METHOD=″POST″>
Zone de texte standard de texte :
<INPUT TYPE=″text″ NAME=″z_saisie1″ />
<BR />
Zone de texte formatée :
<INPUT TYPE=″text″ NAME=″z_saisie2″ SIZE=″40″ />
<BR />
Zone de texte limitée :
<INPUT TYPE=″text″ NAME=″z_saisie3″ MAXLENGTH=″40″ />
<BR />
Zone de texte formatée et limitée :
<INPUT TYPE=″text″ NAME=″z_saisie4″ SIZE=″40″ MAXLENGTH=″40″ />
<BR />
Zone de texte (mot de passe) :
<INPUT TYPE=″password″ NAME=″mot_de_passe″ SIZE=″10″ MAXLENGTH=″20″ />
</FORM>
</BODY>
</HTML>
page 11 / 22
om (2001-2006)
Attributs :
NAME="nom_du_champ"
ID="identifiant"
SIZE=n
MAXLENGTH=n
TYPE= TEXT | PASSWORD
VALUE="valeur"
L'attribut est quasiment obligatoire. Le nom va identifier la chaîne de
caractères du champ de saisie. De façon schématique, NOM = (ce qui
est introduit dans la ligne de texte). Ce nom de champ (ici
nom_du_champ) va être transmis avec sa valeur (variable ou
identificateur) à la ressource CGI du serveur pour être traités quand
l’utilisateur validera le formulaire.
Le nom devrait disparaître au profit d’un identifiant unique de champ.
En XHTML cet attribut est obligatoire.
L'attribut size (optionnel) définit la longueur du champ de saisie (n).
Notons que l'on peut introduire un nombre de caractères plus élevé que
celui de la longueur.
(optionnel) Limite le nombre réel de caractères que l'on peut introduire
dans le champ de saisie.
TEXT définit une zone de texte en saisie standard ; PASSWORD définit
une zone de texte en saisie cachée (utile pour la saisie de mot de
passe).
Permet de définir une valeur initiale valeur.
Remarque : Il peut être important de respecter un certain formalisme dans l’écriture des noms de
champ de saisie (variable ou identificateur), en fonction de l’interprétation que doit en faire la
ressource CGI. Pour être pris en compte lors de la validation d’un formulaire, et donc dans le message
transmis à la ressource CGI du serveur, il est impératif que la déclaration d’une zone texte (ou de tout
autre composant) soit à l’intérieur des balises du formulaire.
D.2.2. Les composants d’un formulaire
Exemple :
<HTML>
<HEAD>
</HEAD>
<BODY>
Zone de texte standard de texte : <INPUT TYPE=″text″ NAME=″z_saisie1″ /><BR />
<FORM ACTION=″http://MonServeur.fr/MonFichier.exe″ METHOD=″POST″>
Zone de texte standard de texte : <INPUT TYPE=″text″ NAME=″z_saisie2″ /><BR />
<INPUT TYPE="submit" VALUE="Valider" />
</FORM>
</BODY>
</HTML>
page 12 / 22
om (2001-2006)
Même si le navigateur Web permet la visualisation des deux champs de saisie (z_saisie1, et
z_saisie2) ; lors de la validation de ce formulaire seul le champ de saisie de nom z_saisie2 sera
transmis vers la ressource CGI MonFichier.exe.
D.2.3. Les zones de texte multi lignes
HTML gère ses zones de texte simple et multi lignes de façon différente. Les zones de texte multi lignes
utilise les balises <TEXTAREA déclaration d’option> … </TEXTAREA>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>

<TEXTAREA NAME=″zone_texte″ COLS=″40″ ROWS=″4″>Votre texte ici</TEXTAREA>
<BR />
<INPUT TYPE="submit" VALUE="Valider" />
<INPUT TYPE="reset" VALUE="Effacer" /><BR />
</FORM>
</BODY>
</HTML>
Attributs :
NAME="nom_du_champ"
COLS=taille
ROWS=taille
WRAP=
VIRTUAL | PHYSICAL | OFF
Toute zone de texte multi ligne (champ de saisie) doit être nommée
car ce nom de champ (ici nom_du_champ) va être transmis avec sa
valeur à la ressource CGI du serveur pour être traités quand
l’utilisateur validera le formulaire.
Détermine le nombre de colonnes en caractères.
Détermine le nombre de lignes de la zone de texte.
Ces options sont indispensables pour certains navigateurs.
Virtual : rupture de lignes virtuelle (le texte est transmis en une
seule phrase) ;
Physical : rupture de lignes physique (le texte est transmis avec les
sauts de lignes) ;
Off : aucun changement de ligne.
Il est possible d’initialiser une zone de saisie multi lignes en plaçant le texte d’initialisation entre les
balises <TEXTAREA> … </TEXTAREA>.
page 13 / 22
om (2001-2006)
D.2.4. Les zones de liste déroulante
Les zones de liste déroulante sont aussi appelées Combo Box, elles permettent d’effectuer un choix
dans une liste de proposition.
La balise <SELECT> … </SELECT> indique au navigateur l'usage d'une liste déroulante. Les éléments
de la liste sont introduits par la balise <OPTION> ... </OPTION>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="nom" SIZE="1">
<OPTION VALUE="Lundi">lundi</OPTION>
<OPTION VALUE="Mardi">mardi</OPTION>
<OPTION VALUE="Mercredi">mercredi</OPTION>
<OPTION VALUE="Jeudi">jeudi</OPTION>
<OPTION VALUE="Vendredi">vendredi</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Si rien n’est spécifié c’est le premier choix de la liste qui est sélectionné.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="Liste_deroule2">
<OPTION VALUE="1"> Anglais</OPTION>
<OPTION VALUE="2"> Economie Droit</OPTION>
<OPTION VALUE="3"> Français</OPTION>
<OPTION VALUE="4" SELECTED> Informatique</OPTION>
<OPTION VALUE="5"> Mathématiques</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
page 14 / 22
om (2001-2006)
La balise <SELECT> … </SELECT> :
NAME="nom_du_champ"
Toute zone de liste déroulante doit être nommée car ce nom de champ
(ici nom_du_champ) va être transmis avec sa valeur à la ressource CGI
du serveur pour être traités quand l’utilisateur validera le formulaire.
L'attribut size détermine le nombre d'éléments de liste affiché dans la
boite d'entrée. En fait, size="1" est optionnel car "1" est la valeur par
défaut.
SIZE=n
L’élément <OPTION> … </OPTION> :
VALUE=valeur
SELECTED
La clause VALUE permet de définir la valeur (valeur) qui sera envoyée
vers la ressource CGI lors de la validation du formulaire dans le
nom_du_champ.
Permet de déterminer le choix présélectionné.
D.2.5. Les Listes de choix mono-sélection
Les listes de choix en mono-sélection ont la même fonction que les zones de listes déroulantes elles
permettent d’effectuer un choix dans une liste de proposition, seule la présentation change.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="Liste_choix" SIZE=″4″>
<OPTION VALUE="Anglais"> Anglais</OPTION>
<OPTION VALUE="Economie Droit"> Economie Droit</OPTION>
<OPTION VALUE="Français"> Français</OPTION>
<OPTION VALUE="Informatique"> Informatique</OPTION>
<OPTION VALUE="Mathématiques"> Mathématiques</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
page 15 / 22
om (2001-2006)
Avec SIZE=4
Avec SIZE=5
La description est quasi identique à celle de la zone de liste déroulante on ajoute simplement la clause
SIZE=taille (en nombre de ligne affichable) dans la balise <SELECT ... >.
D.2.6. Les Listes de choix multi-sélection
Les listes de choix en sélection multiple permettent d’effectuer un ou plusieurs choix dans une liste de
proposition. L’utilisation des touches Majuscule ou Contrôle gère la sélection multiple.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="Liste_choix" MULTIPLE >
<OPTION VALUE="4"> Informatique</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
page 16 / 22
om (2001-2006)
La description est quasi identique à celle de la zone de liste déroulante on ajoute simplement la clause
MULTIPLE dans la balise <SELECT ... MULTIPLE>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="Liste_choix" MULTIPLE SIZE=″5″>
<OPTION VALUE="4"> Informatique</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
D.2.7. Les Boutons d'option (cases d’option)
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois
peut être activée (le "ou" exclusif).
La syntaxe de base est :
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=″radio″ NAME=″feux″ VALUE=″rouge″ /> rouge<BR />
<INPUT TYPE=″radio″ NAME=″feux″ VALUE=″orange″ /> orange<BR />
<INPUT TYPE=″radio″ NAME=″feux″ VALUE=″vert″ /> vert<BR />
</FORM>
</BODY>
</HTML>
page 17 / 22
om (2001-2006)
On peut définir la sélection d’une option par défaut :
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="statut" VALUE="Administratif" /> Administratif
<INPUT TYPE="radio" NAME="statut" VALUE="Agent" /> Agent
<INPUT TYPE="radio" NAME="statut" VALUE="Enseignant" /> Enseignant
<INPUT TYPE="radio" NAME="statut" VALUE="Etudiant" /> Etudiant
<INPUT TYPE="radio" NAME="statut" VALUE="Elève" CHECKED /> Elève
</FORM>
</BODY>
</HTML>
Il est indispensable de veiller à ce que le même nom de bouton radio soit associé à toutes
les options d’un choix.
D.2.8. Les Cases à cocher
La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant,
plusieurs choix simultanés peuvent être réalisés.
La syntaxe de base est :
<INPUT TYPE="checkbox" NAME="nom" VALUE="valeur attachée au bouton" />
Le TYPE checkbox définit la case à cocher, la clause NAME indique le nom de la case à cocher qui sera
utilisé comme variable lors de la validation du formulaire, la clause VALUE indique la valeur qui sera
transmise à la variable de la clause NAME si l’option est choisie par l’utilisateur, et le texte à l’extérieur
de la balise sera affiché par le navigateur.
page 18 / 22
om (2001-2006)
Exemple :
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT type="checkbox" name="choix1" value="1" /> Toto
<INPUT type="checkbox" name="choix2" value="2" /> Titi
<INPUT type="checkbox" name="choix3" value="3" /> Tata
<INPUT type="checkbox" name="choix4" value="4" /> Tutu
</FORM>
</BODY>
</HTML>
Remarque :
Les règles pour l'attribut NAME="nom" sont moins précises que pour les boutons d'option. Vous
pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant
des noms différents sont nécessaires pour l'utilisation d'un script. L'attribut CHECKED (optionnel)
permet de présélectionner une case à cocher.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-88591" />
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="couleur1" VALUE="1" CHECKED />bleu<BR />
<INPUT TYPE="checkbox" NAME="couleur2" VALUE="4" />orange<BR />
<INPUT TYPE="checkbox" NAME="couleur3" VALUE="2" />rouge<BR />
<INPUT TYPE="checkbox" NAME="couleur4" VALUE="3" />jaune<BR />
<INPUT TYPE="checkbox" NAME="couleur5" VALUE="5" CHECKED />vert
</FORM>
</BODY>
</HTML>
page 19 / 22
om (2001-2006)
D.3. Les boutons de commande
Le bouton de commande sert à placer un bouton, auquel on assignera plus tard une tâche particulière.
Pour qu’un formulaire puisse avoir une réelle action il faut non seulement qu’il soit déclaré dans un
document HTML par les balises <FORM paramètres> </FORM>, et qu’il soit associé à une ressource
exécutable sur le serveur représenté par le paramètre ACTION, mais aussi d’un bouton d’envoi de la
requête pour que l’utilisateur du document HTML puisse soumettre la demande au serveur Web.
Syntaxe :
<INPUT TYPE="button" NAME="nom" VALUE="texte du bouton" />
D.3.1. Les Boutons "Submit"
Le bouton SUBMIT a la tâche spécifique de transmettre toutes les informations contenues dans le
formulaire à l'URL désignée dans les attributs ACTION et METHOD de la balise <FORM>.
<HTML>
<HEAD>
<TITLE>Formulaires avec les boutons HTML</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="Envoyer" />
</FORM>
</BODY>
</HTML>
D.3.2. Les Boutons "Reset"
Le bouton RESET permet d'annuler les modifications apportées aux contrôles d'un formulaire et de
restaurer les valeurs par défaut.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="Annuler" />
</FORM>
</BODY>
</HTML>
page 20 / 22
om (2001-2006)
Les modifications seront peu nombreuses car le bouton RESET a une fonction HTML très spécifique.
Seul le texte du bouton pourra être modifié (par défaut RESET).
Le TYPE="image" permet de remplacer le bouton SUBMIT par une image.
Exemple :
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="image" NAME="nom" SRC="images/titileft.gif" />
</FORM>
</BODY>
</HTML>
D.3.3. Les boutons d’exécution de script
Les documents HTML permettent d’intégrer des fonctions ou procédures écrites en JavaScript (SUN) ou
en VBScript (MicroSoft) qui peuvent être déclenchées par des événements de type clic sur un bouton
(par exemple). On utilise pour cela la balise <INPUT TYPE ... />.
<HTML>
<HEAD>
</HEAD>

<SCRIPT LANGUAGE=VBScript>
Sub Bonjour_OnClick()
Alert ″Bonjour !!!″
End Sub
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE=″button″ VALUE=″Executer un script″ NAME=″Bonjour″ />
</FORM>
</BODY>
</HTML>
page 21 / 22
om (2001-2006)
Syntaxe :
<INPUT TYPE="button" VALUE="Executer un script" NAME="Bonjour" /> le TYPE button
définit le bouton, la clause VALUE le texte du bouton, et NAME indique le nom du bouton qui sera
réutilisé par les différentes fonctions et procédures qui gère les événements qui lui sont associés.
Le clic de l’utilisateur sur le bouton "Executer un script" entraîne l’appel à la procédure
Bonjour_OnClick() qui s’exécute en affichant la nouvelle fenêtre à droite.
D.3.4. Les entrées cachées
Les formulaires HTML offrent la possibilité de gérer des "variables" (noms de champ) invisibles à
l’utilisateur et qui permettront le passage de paramètres vers la ressource CGI en fonction des souhaits
du concepteur du formulaire.
Si par exemple un même formulaire est présent sur plusieurs sites, il peut être intéressant que la
requête indique à la ressource CGI l’origine du formulaire.
<INPUT TYPE="hidden" NAME="origine" VALUE="site EX001P" />
TYPE hidden définit une entrée cachée, la clause NAME indique le nom de champ qui sera utilisé
comme variable lors de la validation du formulaire, la clause VALUE indique la valeur qui sera transmise
à la variable de la clause NAME.
Olivier Mondet
http://unidentified-one.net
page 22 / 22
om (2001-2006)