Table des matières
HTML
Présentation
Les pages HTML (HyperText Markup Language) sont les éléments de base de la navigation sur le Web. Il s'agit de pages visualisables sur n'importe quelle machine de la même manière, quelle qu'en soit le système d'exploitation, l'interface, la puissance…, et ce grâce au langage HTML et à ses balises ou marqueurs. Lors de l’envoi d’un serveur vers le poste utilisateur par le protocole HTTP (HyperText Transfert Protocol), seul le texte correspondant est transmis. La mise en forme sera faite par le navigateur du poste récepteur en fonction des balises définies dans le fichier HTML.
Pages Web évoluées
Si le langage HTML mis en forme par le navigateur reste au final la seule partie visible pour l’utilisateur, les pages Web incorporent aujourd’hui de nombreuses améliorations ou simplifications :
- Feuilles de style : complément indispensable des sites Web, ces feuilles de style enregistrent en un fichier unique les options de mise en forme (taille et police de caractères, couleur des fonds et du texte, paragraphes, etc). Elles évitent d’avoir à réécrire la mise en forme dans chaque page HTML, et permettent la modification de la mise en forme en une seule fois.
- Objets riches : qu’il s’agisse de vidéos, d’applet Java, de contrôles ActiveX ou d’animations flash, ces éléments nécessitent que le navigateur intègre un plugin ou module additionnel capable de les lire
- Scripts côté client : exprimés en langage Javascript ou VBScript, ils permettent de contrôler les actions de l’utilisateur (formats de saisies, remplissages de zones, etc), d’automatiser des tâches (calculs intermédiaires) sans repasser par un dialogue avec le serveur Web, de proposer des menus plus riches.
- Scripts côtés serveur : ils réalisent toutes les tâches complexes pour chaque connexion (automatisation, interrogation de base de données, remplissage d’un panier d’achat, etc).
Contrairement aux scripts côté client, ils sont réalisés par le serveur Web. Leur code n’est pas visible par l’utilisateur final. Les langages utilisés sont notamment PHP, JSP ou ASP. - Client riche : le langage AJAX (Javascript et XML) permet de renvoyer vers le client la réalisation d’un certain nombre de traitements qui auraient dû être traités par le script côté serveur, de manière à décharger la machine centrale et à exploiter la puissance de poste client.
Syntaxe
HTML un langage de description de contenu qui permet de transporter des informations très compactes (du texte ASCII), la charge de mise en forme étant dévolue au navigateur. Il se base sur des balises (markup) indiquant les mises en forme à appliquer au texte, les intégrations à ajouter (fond, image, son, etc).
Les balises
Elles s’écrivent entre <…>, et possèdent la plupart du temps une balise fermante </…>. Exemple : la mise en gras se fait par <b>texte à mettre en gras</b>. On ferme les balises dans l’ordre inverse où on les a ouvertes
Exemple : <HTML> <b><i>………..</i></b> </HTML> Les balises peuvent comporter des options au format option=“valeur”
Exemple : <HTML> <table align=“ cente” r border=“ 2” bgcolor=“ 9933CC” > </HTML>
1 La structure d’une page WEB
Elle comporte deux parties :
- L’entête (<html><head></html>) qui décrit la page (mots clés (<html><meta></html>), auteur, éditeur utilisé, titre affiché dans la barre de titre (<html><title></html>), etc) et comporte les scripts côté client (notamment les déclarations de fonctions).
- Le corps (<html><BODY></html>) qui contient tout ce qui sera affiché dans le navigateur.
Illustration
<html> indique que le document contient du langage HTML Entete : balise <head> - Titre pour la barre de titre du navigateur : balise <title> - Commentaires sur l’auteur, l’outil de création, les mots clés... : balise <meta> </head> corps : balise <body> 1.textes 2.tableaux : balise <table> 3.images : balise <img...> 4.liens : balise <a href=> 5. commentaires HTML <!...> </body> </html>
Frames, multimédia, objets et chargement
Au delà du texte même qu’elle contient, une page Web peut faire référence à des objets externes : Une page peut ainsi n’être que le cadre de présentation de multiples pages : la balise <html><frameset></html> et son découpage en <html><frame></html> permet de présenter des informations de manière structurée, tout en économisant certains transferts pour des parties stables (menus, entête, etc).
On voit aussi sur cette copie d’écran que la page intègre des images (grâce à la balise <img src=“nom_image”…>). On pourra aussi associer du son (<html><embed src=“nom_fichiersonore”…></html>). Enfin, une page pourra intégrer un élément plus complexe comme des applets java (balise <html><applet…></html>) ou des contrôles ActiveX Microsoft (balise <html><object…></html>).
Toute la difficulté de ces pages composites réside dans leur chargement sur le poste client. En effet, le client demande une page HTML. Le serveur lui retourne le contenu textuel de cette page (le frame initial, la page brute). Le logiciel client doit alors parcourir le code et repérer tous les éléments intégrés à la page, pour lesquels il doit faire une demande de chargement (GET) auprès du serveur.
Dans les premières versions des serveurs HTTP, le dialogue était réalisé en mode UDP : pour chacune des parties de la page, une demande unique était adressée au serveur. Intéressant lorsque les pages étaient essentiellement composées de texte, ce principe est devenu limité. Les échanges aujourd’hui sont réalisés en TCP (sur le port 80) avec l’envoi complet de toutes les parties sur un seul dialogue.
Le client doit quand même réaliser une demande pour chaque partie constitutive de la page. À la fin du chargement de la page et de ses compléments, la connexion est terminée par le serveur ou conservée le temps de la session (keep-alive)
2 HTML et XHTML
HTML est une norme qui découle d’un standard plus large nommé SGML (Standard Generalized Markup Language) qui a aussi donné lieu à la norme XML (Extensible Markup Language) pour le stockage des données, indépendamment de sa mise en forme. Très souple dans l’écriture du code (majuscules, valeurs encadrées ou non de guillemets, balises non fermées), le HTML pose des problèmes lors de la validation de pages par des automates (notamment les moteurs de recherche) et parfois de son affichage dans les navigateurs. C’est pourquoi le standard XHTML a vu le jour qui impose au HTML la rigueur nécessaire au XML. Les balises et options doivent être écrites en minuscule. Toute balise doit avoir une balise fermante (y compris pour <html><br></html>, <html><link></html> ou <html><meta></html> par exemple). Les valeurs sont toutes écrites entre “ ” .
Pour des questions de lisibilité et de repérage des balises, ce document ne respecte pas le XHTML.
3 Entête : La balise <HEAD>
Compris entre la balise <html><head></html> et <html></head></html>, l’entête permet de donner des informations sur le document. Il ne doit pas contenir de texte à afficher sur la page WEB. En revanche, compris entre la balise <html><title></html> et <html></title></html>, on peut indiquer le texte à afficher dans la barre de titre du navigateur. On y placera aussi toutes les informations de description du contenu de la page grâce à la balise <html><meta></html> et ses options NAME (qui définit le nom de l’information qui suit, par exemple author, copyright, revisitafter, date, etc) et CONTENT (qui donne la valeur qui sera étudiée par les moteurs de recherche par exemple). Les scripts sont généralement placés dans l’entête.
4 Corps de la page : la balise <BODY>
C’est ici que l’on pourra définir les options suivantes :
Option | Syntaxe |
---|---|
couleur du fond de la page | BGCOLOR=“codecouleur” |
image d’arrière plan | BACKGROUND=“fichierimage” |
son diffusé en fond sonore | BGSOUND=“fichierson” |
couleur par défaut du texte | TEXT=“codecouleur” |
couleur des liens hypertexte | LINK=“codecouleur” |
couleur des liens déjà visités | VLINK=“codecouleur” |
couleur du lien en cours de sélection | ALINK = “code couleur” |
Par exemple, pour obtenir un texte rouge (FF0000) sur fond noir (000000), et que les liens soient en blanc (FFFFFF), puis verts s’ils sont visités (0000FF), on aura une balise comme suit : <HTML><body bgcolot=“000000” text=“FF0000” link=“FFFFFF” vlink=“0000FF”></HTML>
II La mise en forme
1 Les titres de paragraphe
Des formats prédéfinis permettent la mise en forme des titres. Le résultat peut différer d’un navigateur à l’autre.
Balises
Balise | Explication | |
---|---|---|
H1 à H10 | Crée une hiérarchie de titres | |
Option | Usage | |
ALIGN=Center/Left/Right | détermine l'alignement du titre |
2 La mise en forme des paragraphes
Le HTML ne prend pas en compte la mise en forme qui peut être faite dans le fichier textuel. Les retours à la ligne, les tabulations ou le centrage réalisés lors de la création du code sont ignorées, et c’est au travers des balises que l’on réalise cette organisation.
Balises
Balise | Valeur ou option | Explication |
---|---|---|
P | encadre un paragraphe avec une mise en forme générale | |
ALIGN | Center/Left/Right | détermine l'alignement du paragraphe |
PRE | encadre un paragraphe en respectant sa mise en forme du texte Les retours à la ligne, les tabulations, la police de caractère… sont reproduits à l’identique dans la page WEB |
|
DIV | Définit l’alignement pour une division de texte (toutes les balises de paragraphe, image et texte qu’il encadre). Est aussi utilisé avec les feuilles de style pour enrichir la mise en page (voir fiche css) | |
ALIGN=Center / Left / Right | détermine l'alignement de la division | |
BR | Retourne à la ligne Cette balise n'a pas besoin d'être refermée (pas de </BR>) en html. En XHTML, on écrira <br/> qui ouvre et ferme simultanément. |
|
CENTER | centre le texte. N’est plus utilisé et remplacé par <DIV ALIGN=“center”> | |
BLOCKQUOTE DIR | encadre un paragraphe indenté | |
HR | trace une ligne séparatrice horizontale (Horizontal Rule) | |
WIDTH=valeur | définit la largeur du trait | |
SIZE=valeur | définit l’épaisseur du trait | |
NOSHADE | élimine l’affichage en 3D |
3 La mise en forme des caractères
Pour modifier les paramètres d’affichage du texte (gras, police, taille,…), on recourra aux balises ci dessous.
Police de caractères
Balise | Valeur ou option | Explication |
---|---|---|
FONT | détermine la police de caractères | |
FACE=nompolice | définit la police (Arial,Times….) | |
SIZE=valeur | définit la taille de la police | |
COLOR=codecouleur | détermine la couleur du texte |
Les styles
Balise | Style |
---|---|
B | gras (bold) |
U> | souligné (underlined) |
I> | Italique |
S> | Caractère barré (strike) |
SUB> | Indice |
SUP> | Exposant |
EM> | style appuyé (emphathised), généralement en italique |
STRONG | style appuyé, généralement en gras |
BIG | Caractère plus gros |
SMALL | Caractère plus petit |
Autres balises
Balise | Explication |
---|---|
BLINK | fait clignoter le texte (avec Netscape uniquement) |
MARQUEE | affiche un texte défilant appelé bannière |
BEHAVIOR | permet de modifier le mode de défilement avec les valeurs SCROLL (valeur par défaut) : défile de gauche à droite et s’arrête après avoir atteint le bord droit SLIDE : idem mais de droite à gauche ALTERNATE : défilement alternatif gauche→droite et droite→gauche. |
4 Les caractères spéciaux
Certains caractères ne peuvent être affichés directement de manière sûre et nécessitent de passer par un caractère spécifique reconnu de manière universelle (par exemple pour les caractères accentués).
Caractère | Usage |
---|---|
| espace insécable (Non Brokable SPace) |
< ou < | Signe inférieur à < (Lesser Then) |
> ou > | Signe supérieur à > (Greater Then) |
& | é commercial & (AMPerstand) |
é | é |
è ; | è |
ê ; | ê |
Ç | ç |
5 Les codes de couleur
Les couleurs affichables pour le texte, le fond et les liens, sont déterminées par le célèbre triolet RVB : rouge, vert et bleu. Pour chacune de ces couleurs, on peut définir une valeur comprise entre 0 et 255, exprimée sur deux positions hexadécimales.
On obtient ainsi 16 millions de couleurs affichables. Cependant, tous les navigateurs ne les supportent pas nécessairement.
Voici les valeurs les plus courantes. Le noir correspond à la valeur #000000.
Aujourd’hui, tous les codes de couleur ont un nom associé. En voici quelques exemples
III Les objets de présentation
1 Les tableaux
Il est possible de présenter les informations sous forme de tableau. On les utilise aujourd’hui à la place des frames pour séparer les différentes zones d’un document (entête, menu, zone d’affichage de l’information). C’est aussi un outil très courant pour organiser le texte en colonnes ou positionner des éléments à droite et à gauche, avec les balises <html><div></html>.
Balises
Balise | Valeur ou option | Explication |
---|---|---|
CAPTION | titre du tableau (optionnel) | |
VALIGN=top/bottom | cette option permet de déterminer si le titre sera au-dessus (top) ou au-dessous (bottom) du tableau | |
TABLE | encadre la définition du tableau | |
Les options suivantes sont facultatives et devraient être renvoyées dans le CSS | ||
CELLSPACING=valeurnumérique | définit l'espace entre les cases (lignes et colonnes) | |
BORDER=valeurnumérique | définit l’épaisseur (en points) de la bordure | |
TH | encadre les titres des colonnes (table header) | |
TR | encadre une nouvelle ligne (table row) | |
TD | définit le contenu des cellules (table data) | |
Les options suivantes sont valables pour le tableau et/ou les cases/lignes/colonnes qui le composent | ||
HEIGHT | valeurnumérique (en points ou en %) | définit la hauteur minimum du tableau |
WIDTH | valeurnumérique (en points ou en %) | définit la largeur de l’élément |
COLSPAN | valeurnumérique | crée une case sur le nombre de colonnes spécifié |
ROWSPAN | valeurnumérique | crée une case sur le nombre de lignes spécifié |
ALIGN | center/left/right | détermine l'alignement du texte dans les cases de la ligne |
VALIGN | top/middle/bottom | détermine la position du texte dans la hauteur de la cellule ou pour toute la ligne |
BGCOLOR | Valeurnumérique | donne la couleur du fond pour cette partie du tableau |
CELLPADDING | définit l’espace entre le texte et le bord de la cellule |
2 Les listes à puces ou numérotées
La création de listes permet l’affichage d’informations de manière structurée grâce à des puces ou une numérotation.
Balises
La déclaration d'une liste se fait par les balises <html><OL></html> ou <html><UL></html>. La numérotation ou le niveau de puce continue tant que la balise correspondante n’est pas refermée. L’affichage d’une puce/numéro nécessite la balise <html><LI></html>
Balise | Explication |
---|---|
UL | (Unordered List) : encadre la déclaration des listes à puces On choisira la puce par l’option type = disc | square | circle qui donnent respectivement un rond plein, un carré plein ou un cercle vide. |
OL | (Ordered List) : encadre la déclaration des listes numérotées On choisira la numérotation par l’option type = 1 | a | A| i | I Le nnuméro de départ est défini par l’option START = numéro |
LI | (List Item) : déclare une nouvelle ligne comportant une puce ou un numéro |
LH | (List Header) : encadre la déclaration du titre d'une liste |
Exemples : Il est possible de combiner ces diverses possibilités.
Exemple 1
HTML <HTML> <UL>a <LH>le titre</LH>
<LI> tiret 1 <LI> tiret 2 <UL> sous liste <LI>sl1 <LI>sl2 </UL> <LI>tiret 3
</UL> </HTML>
RÉSULTAT
- a
- Le titre
- tiret 1
- tiret 2
- sous liste
- sl1
- sl2
- tiret 3
Exemple 2
HTML <HTML> <OL>
<LI> tiret 1 <LI> tiret 2 <UL> sous liste <LI>sl1 <LI>sl2 </UL> <LI>tiret 3 <OL> <LI>a1 <LI>a2 </OL>
</OL> </HTML>
RÉSULTAT
- tiret 1
- tiret 2
- sous liste
- sl1
- sl2
- tiret 3
- a1
- a2
Remarque : la mise en forme (tabulation) du code HTML n’est là que pour la lisibilité, elle est ignorée par le navigateur.
3 Insertion d'image
Il est à noter que seules les images au format JPEG (extensions .jpg ou .jpeg), GIF et PNG sont supportées par les navigateurs. On ne peut pas intégrer d’image au format bitmap, qui sont trop volumineuses.
Balises
Balise | Valeur | Explication |
---|---|---|
IMG | inclut une image dans le document | |
SRC=“fichierimage” | définit le chemin d'accès au fichier et son nom | |
ALIGN=Left/Right | définit l'alignement vertical de l'image dans la page | |
ALIGN=Top/Middle/Bottom | définit l'alignement du texte qui suit l'image par rapport à celle-ci (en haut,au milieu ou en bas). | |
On choisira une valeur soit pour l'alignement vertical, soit pour l'alignement du texte | ||
BORDER=valeurnumérique | définit un encadrement autour de l'image |
4 Incorporation de texte
Lorsque certaines parties de code sont amenées à être reproduites sur des pages (par exemple une barre de menu, l’incorporation des feuilles de style, les coordonnées de l’entreprise en bas de chaque page, etc), on peut être amené à enregistrer ces informations récurrentes dans un fichier (ou plusieurs) à part.
On peut souhaiter alors inclure ce contenu à l’intérieur d’autres pages, mais cette possibilité n’est offerte que par les langages de script côté serveur (PHP, ASP et autre) par une commande nommée include. Il existe deux solutions intermédiaires en HTML : la balise <html><object></html> et la balise <html><iframe></html>, qui font apparaître le texte incorporé à l’intérieur d’un cadre avec barre de défilement. <HTML> <object data = “intro.html” type = “text/html”> </object> <iframe src=“intro.html” name=“nom_cadre”></iframe> </HTML>
Ces deux solutions équivalentes (mais seule la seconde semble être supportée par IE et Firefox) acceptent les options WIDTH et HEIGHT qui permettent de définir la largeur et la hauteur du cadre en nombre de pixels, de pouces, de centimètres ou en pourcentage.
IV Liens hypertexte
Le but même des pages Web est de permettre la navigation de pages en pages grâce à des liens hypertexte (c’est à dire du texte réactif). Il existe plusieurs possibilités de navigation :
- A l’intérieur même d’une page, qui nécessite la dépose d’un signet sur un point repérable, puis d’un lien vers ce signet
- Entre pages d’un site : on naviguera donc dans une arborescence grâce à des liens relatifs (c’est à dire qui donnent le chemin d’accès aux fichiers par rapport à l’endroit de la page en cours)
- Entre sites : on devra alors spécifier un chemin absolu précisant l’intégralité des informations nécessaires à la navigation, c’est à dire l’URL complète du fichier ( http://nomSite.nomdomaine.nomExtension/nomFichier).
Balises
Balise | Valeur ou option | Explication |
---|---|---|
A | définit un signet (bookmark) dans la page ou crée un lien hypertexte. La balise pose une ancre (anchor) sur laquelle la souris pourra agir. Il y a deux possibilités : soit on situe un point particulier dans le même document (on parlera de signet), soit on renvoie vers un signet ou un autre document (lien hypertexte) |
|
NAME = nom_du_signet | positionne une marque dans la page Attention : la casse (majuscule/minuscule) est prise en compte. |
|
HREF [chemin][/fichier][#nom signet] | établit un lien vers un répertoire, un document ou un signet. | |
HREF [URL][/fichier][#nom signet] | établit un lien vers un site et un document ou un signet dans ce site. | |
TARGET = cadre/top | ouvre la fenêtre dans le cadre nommé (voir frames) ou par dessus un document avec cadre |
Exemples :
- définition d'un signet appelé ici : <html><a name=“ici” /></html>
- définition d'un lien vers ce signet : <html><a href=#ici>lienversici</a></html>
- définition d’un lien vers une page nommée pag2.htm : <html><a href=Pag2.htm>Page2</a></html>
- définition d’un lien en cliquant sur une image : <html><a href=Pag2.htm><img src=suite.gif></a></html>
- définition d’un lien vers un autre site : <html><a href=“http://www.ac-caen.fr”>Le site académique</a></html>
V Les frames (ou cadres)
Dans un document HTML, il est possible de composer l’écran en plusieurs sous parties affichant chacune une page HTML. Le premier intérêt de cette technique est que certaines parties récurrentes dans un site Web peuvent n’être envoyées qu’une seule fois par le serveur. Aux premiers temps de l’internet, avec des connexions très lentes, il y avait un intérêt évident.
Cette technique a tendance à disparaître pour des questions d’ergonomie et de simplicité d’usage. On lui préfère les tableaux ou la combinaison de balises <html><div></html> ou <html><span></html> et de feuilles de style.
Balises
Balise | Valeur ou option | Explication |
---|---|---|
FRAMESET | encadre la déclaration d’une page avec FRAME | |
FRAMEBORDER=valeurnumérique | définit la taille de l’encadrement | |
FRAMESPACING=valeurnumérique | définit la distance entre les cadres | |
COLS=v1,v2,v3… | définit la taille des cadres en colonne | |
ROWS=v1,v2,v3… | définit la taille des cadres en ligne | |
Pour ROWS et COLS, les dernières valeurs peuvent être remplacées par *, indiquant que l’on attribue le reste pour la dernière ligne ou colonne. | ||
FRAME | encadre la déclaration d’un des cadres du document avec FRAME | |
NAME=nom | indique le nom affecté au cadre | |
SRC=fichier | indique le fichier qui sera affiché dans ce cadre | |
MARGINWIDTH=Valeurnumérique | indique la taille de la bordure | |
MARGINHEIGHT=valeurnumérique | indique la hauteur de la bordure | |
WIDTH=valeurnumérique(en points ou en %) | indique la largeur du cadre | |
HEIGHT=valeurnumérique(enpointsouen%) | indique la hauteur du cadre | |
NORESIZE | empêche l’utilisateur de redimensionner le cadre | |
SCROLLING=Yes/No/Auto | définit les possibilités de défilement du cadre | |
HSCROLL=Yes/No | affiche (ou non) une barre de défilement horizontale | |
VSCROLL=Yes/No | affiche (ou non) une barre de défilement verticale | |
NOFRAME | encadre le message affiché si le navigateur ne supporte pas les FRAMES |
Exemple
Un document (par exemple, AccueilLJR.htm) permettra cette disposition à l’écran.
On dispose ici d’un document comportant une première division – nommée frameset - horizontale (par exemple 15% de l’écran pour l’entête et 85% pour le reste), la deuxième partie horizontale étant un second frameset composé de deux colonnes (par exemple 150 points pour le menu et 450 points pour le reste).
Il contiendra, après sa partie HEAD, les éléments suivants : <HTML> <html>… <frameset rows=“15%,*” frameborder=“2”>
<frame name="EnHaut" src="entete.htm" scrolling="no" noresize> <frameset cols="150,450" frameborder="2"> <frame name="GAUCHE" src="Menu.htm" scrolling="auto"> <frame name="DROITE" src="Formation.htm" scrolling="auto"> </frameset>
</frameset>
<noframe> ....Texte à afficher de type « Votre navigateur ne supporte pas les frames » </noframe>
… </html> </HTML>
Par ailleurs, les liens du Menu (fichier HTML pointé par la partie de gauche de la partie du bas) seront exprimés en réutilisant le nom des cadres tels que définis dans le fichier AccueilLJR.htm : <HTML><a href = “Formation.htm” target=“DROITE”>La Formation</a></HTML>
VI Les formulaires
Les formulaires vont permettre d'établir une interaction entre l'utilisateur et le serveur WEB. Le principe est de donner des zones à saisir et de les envoyer par l'intermédiaire d'un bouton SUBMIT au serveur qui, à l'aide de programmes spécifiques (PERL, CGI, PHP, ou autres), pourra en tirer un résultat.
Balises
Balise | Valeur ou Option | Explication |
---|---|---|
FORM | Inclut un formulaire dans le document | |
method=POST/GET | indique si l’on doit envoyer les valeurs en les masquant (POST) ou visibles(GET) | |
action=“fichier” | indique quelle est la page appelée lorsque l’on clique sur le bouton submit. Cette page pourra traiter les données du formulaire | |
INPUT | permet d'insérer un objet particulier dans un formulaire | |
TYPE=… | voir tableau des objets de formulaire ci-dessous | |
NAME=nom | définit le nom de l'objet | |
ID=valeur | définit l’identifiant d’un objet. Utilisé lorsque plusieurs éléments ont le même nom. | |
VALUE=valeur | valeur attribuée à l'objet input ou texte affiché sur les bouton | |
* L'id sert à créer un groupe d'objets ayant tous le même nom (name) mais des valeurs différents. Cela permet de créer des choix pour les boutons et cases à cocher et pour les scripts côté client. * Le nom de l'objet (name) servira pour la récupération dans les autres pages et pour les scripts côté client. * La valeur (value) de l'objet est l'information envoyée par le formulaire (hors valeurs renseignées pour les zones de saisie) et l'intitulé des boutons de commande. |
||
SIZE=valeurnumérique | définit le nombre de caractères à saisir pour les zones de texte (text et password) | |
SELECT | permet d'inclure une liste de choix (déroulante ou non) dans un formulaire | |
NAME=nom | définit le nom de l'objet | |
SIZE=valeurnumérique | nombre d'éléments dans la liste | |
MULTIPLE | permet de choisir plusieurs options dans la liste (ne marche pas sur tous les navigateurs) | |
Les données de la liste sont définies par des balises <HTML><option>valeur1<option> <option>valeur2<option>…</HTML> | ||
TEXTAREA | définit une zone de saisie étendue | |
ROWS=valeur | nombre de lignes de texte | |
COLS=valeur | nombre de caractères (colonnes) par ligne |
Les objets des formulaires
Les objets input peuvent prendre plusieurs formes.
Type | Description | Syntaxe |
---|---|---|
Checkbox | Case à cocher qui permet d’activer ou non une valeur. La propriété CHECKED indique si l’objet est coché | <HTML><input name=“abonne”type=“Checkbox” CHECKED></HTML> |
File | Permet d’envoyer le contenu d’un fichier choisi sur le disque du client. Ce bouton fait apparaître un bouton permettant de parcourir le disque local. Élément reconnu par Netscape uniquement. | <HTML><input name=“fichier” type=“File”></HTML> |
Image | Permet de positionner une image (notamment pour les listes à puces). La propriété SRC donne le chemin d’accès à l’image | <HTML><input src=“./beck.gif” name=“liste” type=“Image”></HTML> |
Password | Zone de texte où les données saisies sont remplacées par le caractère * | <HTML><input name=“passe” type=“Password”></HTML> |
Radio | Bouton d’option qui permet de choisir une valeur parmi plusieurs. La propriété CHECKED indique si l’objet est validé | <HTML><input name=“rad0” type=“Radio”></HTML> |
Reset | Bouton qui remet à zéro toutes les valeurs du formulaire | <HTML><input value=“Effacer” name=“raz” type=“Reset”></HTML> |
Submit | Bouton qui envoie les données du formulaire vers la page précisée dans la propriété action | <HTML><input value=“Envoyer” name=“sub” type=“Submit”></HTML> |
Text | Zone de texte standard | <HTML><input value=“entrez votre nom” name=“nom” type=“Text”></HTML> |
Il existe deux autres objets qui ne sont pas du type Input. Ils possèdent leur propre balise et reconnaissent les propriétés name et value. Ils sont présentés dans le tableau ci-dessous.
Nom d’objet | Description | Syntaxe |
---|---|---|
TEXTAREA | Zone de texte étendue avec retour à la ligne, barres de défilement… Les propriétés ROWS et COLS définissent le nombre de ligne et le nombre de colonne de la zone (nombre de caractères par ligne). |
<textarea name=“zone” rows=“12” cols=“25”> </textarea> </HTML> |
SELECT et OPTION | Liste déroulante (SELECT) qui peut être à choix simple ou à choix multiple (attribut MULTIPLE dans la balise SELECT). Contenu de la liste (OPTION), on peut indiquer quelle est la valeur sélectionnée par défaut en ajoutant l’attribut SELECTED dans la balise OPTION) | <HTML><select name=“listeVille”> <option selected>Caen </option> <option>Cherbourg </option> <option>Alençon</option> </select></HTML> |