Les images

Vous allez apprendre , dans cette section, à insérer des images dans vos documents HTML. Vous pourrez également modifier leur position sur la page.

Voici la structure du marqueur :
<IMG LOWSRC="XX.XXX" SRC="XX.XXX" ALT="XXX" ALIGN=XXX HSPACE=X VSPACE=X BORDER=X HEIGHT=X WIDTH=X>
Tous les paramètres de cette structure sont facultatifs à l'exception de SRC.
Détaillons chacun d'eux :

• LOWSRC="XX.XXX" où XX.XXX correspond au nom de l'image (en faible résolution) que le navigateur devra afficher avant le chargement de la véritable image définie par SRC. L'URL (Uniform Resource Locator) fourni à LOWSRC pointe sur une image qui sera affichée avant celle de SRC. L'image en faible résolution (celle pointée par LOWSRC) sera chargée rapidement, elle se trouvera agrandie aux dimensions de la véritable image SRC si vous indiquez au navigateur les proportions de l'image finale. Ainsi, le lecteur peut déjà s'aventurer sur la page (dont les proportions sont maintenant fixées) pendant que l'image finale, qui demande un temps de chargement plus long, se charge. Lorsque le chargement est complet, la véritable image est affichée à la place de sa petite soeur.
• SRC="XX.XXX" reçoit comme valeur un URL : le nom de l'image à charger.
• ALT="XXX" est un argument facultatif que nous vous conseillons d'indiquer dans vos scripts. Il permet en lieu et place de l'image d'afficher le texte XXX contenu entre les guillemets. Si votre page est interprêtée par un browser qui ne dispose pas de capacités graphiques suffisantes pour afficher votre image, où que le lecteur ait désactivé l'affichage des images, le texte inscrit après l'attribut ALT sera affiché à la place de l'image.
• ALIGN=XXX cet attribut peut prendre trois valeurs d'alignement : LEFT, CENTER ou RIGHT. Les valeurs LEFT et RIGHT colleront votre image au bord gauche ou droit, la valeur CENTER, la centrera horizontalement.
• HSPACE=X où X représente le nombre de pixels à insérer horizontalement entre l'image et le texte.
• VSPACE=X où X représente le nombre de pixels à insérer verticalement entre l'image et le texte pour éviter que ce dernier ne se retrouve "collé" à l'image. Plus l'image est grande et plus la valeur de VPSACE et HSPACE sera grande. Des valeurs entre 5 et 15 pixels sont courantes.
• BORDER=X où X représente l'épaisseur en pixels de la bordure autour de l'image. Si vous mettez une image dans un marqueur d'ancrage, celle-ci sera entourée d'une bordure bleue que vous pouvez supprimer en transmettant à BORDER la valeur 0.
• HEIGHT=X où X indique la hauteur en pixels de l'image qui va être affichée. Cet attribut, comme le suivant, permet de transmetttre au browser les dimensions de l'image à afficher et donc de lui permettre de réserver cette place pendant que le chargement de l'image (qui est plus lent que celui du texte) est en cours. Nous vous conseillons d'indiquer les valeurs exactes des dimensions de votre image, sinon le browser se chargera de mettre au format indiqué l'image qu'il charge (vue l'algorithme qu'ils utilisent, si vous avez à agrandir votre image vaut mieux le faire avec un logiciel de retouches tel que Photoshop®). Néanmoins cet agrandissement peut être favorable si vous souhaitez afficher rapidement une image en faible résolution : vous réduisez la taille de votre image que vous souhaitez afficher ; vous spécifier dans LOWSRC le nom de l'image réduite tout en indiquant la taille de la vraie avec HEIGHT et WIDTH, le browser se chargeant de mettre l'image réduite au format de la vraie, puis charge la véritable image qui nécessite un temps de chargement plus long. Le lecteur peut donc consulter votre page avant quelle n'est finie de se charger véritablement.
• WIDTH=X où X indique la largeur en pixels de l'image à afficher. Cet attribut fonctionne conjointement avec HEIGHT.

Les images réactives

Une image réactive comprend des zones sur lesquelles l'utilisateur peut cliquer et qui renvoient vers un objet (lien, ancrage, fichier divers). Le positionnement de ces images s'effectue de la même manière que pour des images "classiques".

• SHAPE=[RECT / POLY / CIRCLE / DEFAULT] : indique que l'aire sera de type rectangulaire, polygonale, circulaire, ou par défaut (soit RECT)
• COORDS="X, X, X, X" : liste des coordonnées
• HREF="URL" : où URL correspond soit à un lien, soit à une ancre
• NOHREF : spécifie que la zone définit est une zone morte

En voici un exemple fictif :
<MAP NAME="testmap">
<AREA SHAPE=RECT COORDS "0,0,100,100" HREF=first.htm>
<AREA SHAPE=RECT COORDS "100,0,200,200" NOHREF>
<AREA SHAPE=RECT COORDS "0,100,100,200" HREF=second.htm>
<AREA SHAPE=RECT COORDS "100,100,200,200" HREF=third.htm>
</MAP>
<IMG SRC="map01.jpg" USEMAP="#testmap">

Pour l'attribut RECT, les coordonnées correspondent aux coins supérieur gauche et inférieur droit.
Pour POLY, une liste de points est à fournir, le dernier devant obligatoirement être identique au premier (afin d'avoir un polygone fermé).
Pour CIRCLE, les coordonnées du centre ainsi que celles d'un point sur le périmètre du cercle sont à fournir.

Il faut savoir que tous les navigateurs n'acceptent pas les images réactives. Il en va de même pour certains browsers UNIX qui ne fonctionnent qu'en mode texte. C'est pourquoi nous vous proposons une alternative aux images réactives : les images morcelées. Il vous suffit de prendre votre image complète et de la découper en plusieurs rectangles avec votre logiciel de dessin favori. Enregistrez les différents morceaux dans des fichiers séparés. Veillez à relever les dimensions de chacun d'eux car vous allez en avoir besoin. Il vous suffit alors d'insérer dans votre code HTML les déclarations correspondantes.
Soit par exemple :
<A HREF="item01.htm"><IMG SRC="item01.jpg" WIDTH=100 HEIGHT=100 BORDER=0></A>
<A HREF="item02.htm"><IMG SRC="item02.jpg" WIDTH=100 HEIGHT=140 BORDER=0></A><BR>
<A HREF="item03.htm"><IMG SRC="item03.jpg" WIDTH=125 HEIGHT=110 BORDER=0></A>
<A HREF="item04.htm"><IMG SRC="item04.jpg" WIDTH=125 HEIGHT=130 BORDER=0></A>
Pour introduire "une zone morte", seule la déclaration d'une balise <IMG SRC="XX.jpg" WIDTH=X HEIGHT=X BORDER=0> suffira.

Les polices de caractères

Les fonds de page et les couleurs

Tous les attributs que nous allons citer sont à insérer dans BODY (cf. infra).

• BACKGROUND="XX.XXX" contrôle l'apparence du papier sur lequel sera inscrit le texte. L'argument à transmettre à BACKGROUND est un URL (Uniform Resource Locator) pointant sur une image de petite taille qui sera répétée afin de couvrir toute la fenêtre active.
• BGPROPERTIES=FIXED fait en sorte que l'image de fond ne défile pas, même si le fond est amené à scroller.
• BGCOLOR=X où X est un format de couleur (cf. infra). BGCOLOR modifie le fond d'écran suivant la teinte d'une couleur.
• TEXT=X où X est un format de couleur. TEXT spécifie la couleur du texte ordinaire, par défaut fixée au noir.
• LEFTMARGIN=X définit une marge de gauche de largeur X pixels.
• TOPMARGIN=X définit une marge en haut de X pixels de large.
• LINK=X où X est un format de couleur. LINK spécifie la couleur des liens, par défaut le bleu brillant.
• VLINK=X où X est un format de couleur. VLINK spécifie la couleur des liens visités, par défaut le pourpre.
• ALINK=X où X est un format de couleur. ALINK spécifie la couleur des liens actifs, c'est à dire la couleur que l'on voit apparaître lorsque l'on clique dessus.

Le format de couleur :
Si, comme beaucoup de browsers, le votre ne reconnait pas les noms de couleurs ou si vous souhaitez disposer d'une couleur originale, voici la structure d'un format de couleur.
Connaissez-vous l'hexadécimal ? Non ? Alors nous vous expliquons !
L'hexadécimal est une base comportant 16 "nombres". Contrairement à notre base décimale qui ne regroupe que 10 termes : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, l'hexadécimal en regroupe 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (et oui, il va falloir compter aussi avec les pieds :-) ).
La valeur d'un chiffre en hexadécimal peut aller jusqu'à 15 (de 0 à 15 : 16¹-1), deux chiffres jusqu'à 255 (16²-1), et cetera.
Il faut savoir que si l'on associe 2 chiffres hexa, le chiffre de droite représente les unités et celui de gauche les seizaines. Ainsi, AF vaut 10*16+15, soit 175.
Chacune des trois couleurs élémentaires est codée sur deux chiffres en hexa.
Les trois couleurs élémentaires sont : le rouge, le vert et le bleu (d'où les réglages RVB en français et RGB en anglais pour Red Green Blue).
On parle de triplet lorsque les valeurs pour le rouge , le vert et le bleu sont réunies.
L'intensité pour chacune de ces teintes est comprise entre 0 et 255. Plus elle est grande et plus la teinte sera intense.
Ainsi, si vous aviez comme couleur : #000000 le résultat (fort prévisible) serait du noir.
Si vous aviez #FFFFFF le résultat serait du blanc.
Le gris moyen qu'utilise Internet Explorer comme arrière-plan est codé : #C0C0C0
Si vous modifiez la couleur du texte, faites attention à ce qu'elle ne soit pas de la même couleur que celle du fond.
Ex : <BODY BGCOLOR="#C0C0C0" TEXT="#00007F" LINK="#404000">
définiera un arrière-plan de couleur gris moyen, un texte de couleur bleu moyen et des liens de couleur jaune sombre.

Les tableaux

Les tableaux permettent une présentation claire et tabulée des données que vous avez à transmettre à votre lectorat.

La structure d'un tableau est relativement simple, elle se compose :

1. D'un en-tête auquel nous pouvons adjoindre 4 attributs afin d'indiquer l'épaisseur de la bordure, l'espacement entre le contenu des cellules et la bordure, ainsi que l'épaisseur de la grille à l'intérieur du tableau.
2. Un titre que l'on peut omettre ou aligner soit un haut soit un bas du tableau.
3. Des lignes, soit aux normes des en-têtes de cellules dont le contenu est centré et en gras, soit aux normes des données dont le contenu est affiché normalement.

<TABLE ALIGN=X WIDTH=X BORDER=X CELLPADDING=X CELLSPACING=X BORDERCOLOR="#XXXXXX" BGCOLOR="#XXXXXX">
<CAPTION ALIGN=X>BlaBlaBla</CAPTION>
<TR><TH>. . .</TH><TH>. . .</TH></TR>
<TR><TD>. . .</TD><TD>. . .</TD></TR>
<TR><TD>. . .</TD><TD>. . .</TD></TR>
</TABLE>

L'attribut ALIGN s'utilise conjointement avec WIDTH pour contrôler la position du tableau par rapport à l'écran. ALIGN peut prendre les valeurs LEFT, CENTER ou RIGHT.
BORDER indique l'épaisseur du trait tout autour du tableau. Par défaut BORDER est égal à 0, ce qui signifie qu'il n'y a aucune bordure autour du tableau.
CELLPADDING reçoit comme argument un nombre de pixels qui correspond à l'espacement entre le contenu des cellules et son encadrement. Par défaut, CELLPADDING=1.
CELLSPACING est égal à l'épaisseur en pixels de la grille interne au tableau.

CAPTION est un bloc facultatif, car vous pouvez très bien ne pas mettre de titre. Néanmoins, si vous souhaitez en insérer un, vous pouvez le placer soit en haut, soit en bas du tableau, grâce à ALIGN qui peut prendre les valeurs TOP ou BOTTOM. Par défaut ALIGN=TOP, c'est à dire que le titre est affiché au-dessus du tableau.

Les unités de mesure standards

Vous pouvez spécifier la largeur d'un cadre, d'une cellule ou de tout autre élément de page à l'aide de plusieurs attributs de balise HTML. Lorsque vous spécifier une largeur, vous pouvez indiquer un pourcentage ou une largeur absolue exprimée dans une des unités prédéfinies.

Les listes

Les listes vous permettront de mettre en forme des énumérations. Vous pourrez insérer des puces sur le côté, ou des numéros pour chiffrer des étapes (par exemple). Une indentation (décalage horizontale) sert à séparer le contenu de la liste du reste du texte. Un saut de ligne est affiché avant et après la liste.

Structure d'une liste numérotée :
<OL>
<LI>Première étape</LI>
<LI>Deuxième étape</LI>
<LI>Troisième étape</LI>
</OL>

Explications :
La liste débute par un marqueur OL (Order List en anglais).
Chaque ligne est insérée dans un bloc LI (Line en anglais)
La liste se termine par un marqueur OL (comme d'hab').

Le résultat de l'exemple ci-dessus (liste ordonnée) :

1. Première étape
2. Deuxième étape
3. Troisième étape

• COMPACT : Met la liste dans une forme plus compacte (petits caractères)
• TYPE=A : Liste les lignes par des lettres majuscules
• TYPE=a : Liste les lignes par des lettres minuscules
• TYPE=I : Numérote les lignes de la liste par des chiffres romains majuscules
• TYPE=i : Numérote les lignes de la liste par des chiffres romains minuscules
• TYPE=1 : Numérote la liste par des nombres
• START=X : Commence la numérotation à partir de X (où X est un nombre entier)

3. Titre en 3 Romain
1. Premier chapitre dans le grand III
2. Deuxième chapitre dans le grand III
4. Titre en 4 Romain
5. Titre en 5 Romain

La création d'une liste sans ordre est identique. Seul le bloc de début change : OL est remplacé par UL (Unorder List en anglais).
Voici l'exemple suivi de son résultat :
<UL>
<LI>Premier argument de l'énumération</LI>
<LI>Deuxième argument de l'énumération</LI>
<LI>Troisième argument de l'énumération</LI>
</UL>

• Premier argument de l'énumération
• Deuxième argument de l'énumération
• Troisième argument de l'énumération

Nous n'avons mis que trois lignes à nos deux exemples de listes ci-dessus. Il est bien sûr possible d'en mettre autant que vous le souhaitez.

• TYPE=DISC : Les puces correspondent à des disques
• TYPE=SQUARE : Les puces correspondent à des carrés
• TYPE=CIRCLE : Les puces correspondent à des cercles

• Premier marqueur de type Square
• Premier marqueur de type Disc
• Premier marqueur de type Circle
• Deuxième marqueur de type Circle
• Deuxième marqueur de type Disc
• Troisième marqueur de type Disc
• Deuxième marqueur de type Square

Comment créer des listes de définition (présentation ressemblant à celle des dictionnaires) ?
Le bloc commence par <DL>, les mots de définition sont introduits par <DT> et le corps de la définition lui-même est préfixé par <DD>.

Voici un exemple :
<DL>
<DT>HTML</DT>
<DD>L'HyperText Mark-up Language est un langage à balises. C'est un système qui parsème un document de balises de formatage indiquant la façon dont doit être présenté le document. Il est ainsi possible de créer des documents lisibles sur n'importe quelle plate-forme avec une architecture client-serveur. Le World Wide Web qui est une ressource du Net, a permis de populariser le HTML. Le Web n'est autre qu'une gallerie de pages qui sont sans cesse remises à jour.</DD>
</DL>

HTML

L'HyperText Mark-up Language est un langage à balises. C'est un système qui parsème un document de balises de formatage indiquant la façon dont doit être présenté le document. Il est ainsi possible de créer des documents lisibles sur n'importe quelle plate-forme avec une architecture client-serveur. Le World Wide Web qui est une ressource du Net, a permis de populariser le HTML. Le Web n'est autre qu'une gallerie de pages qui sont sans cesse remises à jour.

Les liens et les ancrages

Les formulaires

Nous allons vous indiquer la procédure complète pour que vous puissiez créer des formulaires de qualité. Vous pourrez définir toute sorte de type de réponses : des boutons radios, des zones de lecture libres, et cetera.

Les formulaires regroupent leurs informations dans des blocs (un peu comme celui de TABLE).
Un formulaire commence donc par :
<FORM METHOD="POST" ACTION="mailto:mylogin@myplace.fr">
et se termine par :
</FORM>
Dans l'en-tête de FORM, l'attribut METHOD peut être égal à deux valeurs : POST ou GET. Néanmoins, cette dernière valeur est obsolète, c'est pourquoi nous vous conseillons de n'utiliser que POST.
L'attribut ACTION est égal à un URL ou à l'adresse de réception d'un E-Mail. Il s'agit de l'endroit où sera envoyer toutes les réponses que l'utilisateur aura fourni. Toutes ses réponses seront envoyées par E-Mail à votre adresse si vous spécifier dans ACTION l'adresse de réception de vos E-Mail en lieu et place de mylogin@myplace.fr.

Passons maintenant en revue les différentes possibilités de réponses possibles :

Zone de texte limitée en nombre de caractères :
Si vous avez à demander à votre lecteur son nom, son prénom ou une autre zone de texte que vous pouvez limiter à quelques caractères, voici comment procéder :
Votre nom : <INPUT TYPE="text" NAME="name" SIZE="30">
L'attribut INPUT TYPE="text" définit la structure du type de réponse. Il s'agit d'une zone de lecture de texte qui sera limitée à 30 caractères, ce qu'indique précisément l'attribut SIZE. Quant à NAME, il est égal au nom de la variable qui contiendra les renseignements que notre lecteur aura bien voulu nous transmettre.

Les zones de lecture sans restriction :
Si vous avez besoin de recueillir l'adresse postale de votre lecteur pour lui envoyer des disquettes, un catalogue, ou n'importe quoi qui demande un envoi postal, votre lecteur devra indiquer clairement et intégralement son adresse postale qui peut varier en longueur et en forme d'un pays à l'autre. C'est pourquoi nous vous conseillons dans ce cas de laisser une zone de lecture libre pour recueillir l'adresse. De même, si vous laissez en fin de questionnaire une zone libre où notre lecteur va pouvoir nous transmettre tout ce qu'il a sur le coeur, vous ne pouvez prévoir à l'avance le nombre de ligne qu'il va saisir. Voici dans ce genre de cas la procédure à suivre :
Votre adresse postale : <TEXTAREA NAME="adresse" ROWS=2 COLS=40></TEXTAREA>
Comme pour INPUT , TEXTAREA nécessite un nom de variable : tout le texte qui va être saisi dans cet encadré sera référencé sous le nom "adresse". La zone de lecture peut être initialisée, en effet vous avez dû remarquer que TEXTAREA est un bloc et qu'il est possible de taper du texte entre le premier marqueur et le second. Ici, nous avons préféré le laisser vierge, mais il ne tient qu'à vous de l'initialiser avec un texte quelconque. Les attributs ROWS et COLS (pour lignes et colonnes) permettent de dimensionner le cadre affiché qui servira à recueillir les impressions de notre lecteur.

Les boutons radios :
Les boutons radios fonctionnent par groupe, mais un seul d'entre eux peut être coché. Si vous souhaitez connaître le matériel qu'utilise votre lecteur : PC, Mac ou autre, vous pouvez indiquer ceci dans votre formulaire :
Quel est le type de votre ordinateur ? <INPUT TYPE="RADIO" NAME="typeordi" VALUE=1 CHECKED> PC
<INPUT TYPE="RADIO" NAME="typeordi" VALUE=2> MAC
<INPUT TYPE="RADIO" NAME="typeordi" VALUE=3> Autre
Nous définissons comme type de réponse des boutons radio d'où INPUT TYPE="radio" dont le nom de variable est typeordi. Si le premier bouton est coché, la variable typeordi sera égale à 1, si c'est le deuxième bouton, elle sera égale à 2, si c'est le troisième, elle sera égale à 3. L'attribut CHECKED permet d'initialiser le bouton radio qui sera coché par défaut. Si vous omettez cet attribut, le premier bouton sera automatiquement considéré comme le bouton coché par défaut.

Les cases à cocher :
Les cases à cocher sont libres, elles peuvent être cochées et décochées librement sans entraîner une décoche de ses soeurs. Les coches sont très utiles dans les formulaires, elles sont claires et rapides à cocher. Celui qui répond à votre questionnaire ne va pas s'embêter à taper du texte, un simple clique de souris et le tour est joué. Voici comment faire :
Quels sont les logiciels que vous utilisez ?
<INPUT TYPE="CHECKBOX" NAME="check01" VALUE="DOS"> DOS 6.X
<INPUT TYPE="CHECKBOX" NAME="check02" VALUE="Win31"> Windows 3.1
<INPUT TYPE="CHECKBOX" NAME="check03" VALUE="Win98"> Windows 98
<INPUT TYPE="CHECKBOX" NAME="check04" VALUE="Word6"> Word 6.0
<INPUT TYPE="CHECKBOX" NAME="check05" VALUE="Word97"> Word 97
<INPUT TYPE="CHECKBOX" NAME="check06" VALUE="Excel5"> Excel 5.0
<INPUT TYPE="CHECKBOX" NAME="check07" VALUE="Excel97"> Excel 97
<INPUT TYPE="CHECKBOX" NAME="check08" VALUE="Sys7"> System 7.0
<INPUT TYPE="CHECKBOX" NAME="check09" VALUE="Xpress"> XPress
<INPUT TYPE="CHECKBOX" NAME="check10" VALUE="Phtshp5"> Adobe Photoshop 5
L'INPUT TYPE est égal à checkbox (case à cocher) suivi du nom de variable qui est attribué à la case. Nous avons ici indiqué des noms de cases qui se suivent : check01, 02, 03, ... mais vous pouvez leur attribuer le nom que vous désirez. Si la case est cochée, la valeur de VALUE est renvoyée. Le descriptif qui suit cet attribut est affiché à côté de la case afin de savoir à quoi la case correspond.

Les menus déroulants :
Ils permettent au lecteur de répondre à une question fermée. Une liste est pré-établie, le lecteur choisit parmi cette liste un ou plusieurs éléments qui lui sont proposés.
Voici la structure des menus déroulants :
Que faites-vous avec votre ordinateur ?
<SELECT NAME="activite">
<OPTION>Archivage de données</OPTION>
<OPTION>Graphisme</OPTION>
<OPTION SELECTED>Jeux</OPTION>
<OPTION>Programmation</OPTION>
<OPTION>Serveur/Réseau local et étendu</OPTION>
<OPTION>Traitement de texte/Tableur</OPTION>
</SELECT>
SELECT crée une liste composée des différents textes des OPTIONs. NAME est égal au nom de variable qui recevra la réponse de notre lecteur. Une réponse peut être sélectionnée par défaut (comme pour les boutons radios) grâce à l'adjonction de l'attribut SELECTED dans le marqueur OPTION (voir l'exemple ci-dessus). Notre lecteur peut (si vous l'y autorisé) sélectionner plusieurs choix possibles (avec la touches Ctrl enfoncée et quelques cliques de souris sur les attributs à sélectionner). Il suffit pour cela d'indiquer l'attribut MULTIPLE dans le marqueur SELECT. Voici dans l'exemple ci-dessus la modification de ladite ligne :
<SELECT NAME="activite" MULTIPLE>
La liste déroulante s'élargit de quelques lignes et offre désormais la possibilité de sélectionner plusieur choix.

Les boutons de transmission et d'annulation des réponses :
Bien évidemment, lorsque notre lecteur aura fini de remplir le questionnaire que nous lui avons soumis, il faudra bien que ses réponses puissent nous parvenir. C'est pourquoi nous aborderons maintenant la mise en place des boutons qui permettront soit d'envoyer les réponses par E-Mail jusqu'à votre compte, soit d'annuler les réponses (notre lecteur réinitialisera le questionnaire s'il souhaite répondre autrement aux questions, ...). N'oubliez donc pas d'insérer en fin de questionnaire un bref remerciement (répondre à un questionnaire prend du temps et on-line, le temps c'est de l'argent...), puis les deux boutons qui permettront de transmettre les réponses ou de réinitialiser le questionnaire.
La structure du bouton qui transmettra les réponses :
<INPUT TYPE="submit" VALUE="TRANSMETTRE">
L'INPUT TYPE est égal à "submit" (terme anglais pour "transmettre"). L'attribut VALUE est facultatif, mais il permet de mettre le texte que vous souhaitez dans le bouton (ici, le bouton contiendra le texte TRANSMETTRE). Par défaut, le texte "Submit" y est inséré.
Voici maintenant la structure du bouton qui servira à réinitialiser le questionnaire :
<INPUT TYPE="reset" VALUE="EFFACER">
L'INPUT TYPE est reset (réinitialiser en anglais). Toutes les réponses du bloc FORM fournies par l'utilisateur seront réinitialisées à leur valeur par défaut. Là aussi, l'attribut VALUE permet indiquer le contenu du bouton, par défaut le texte "Reset" y est inséré.

RAPPELS :
INPUT TYPE peut être égal à :

• TEXT : pour une zone de lecture limitée à quelques caractères.
• CHECKBOX : pour afficher une case à cocher.
• RADIO : pour faire apparaître un bouton radio.
• SUBMIT : pour afficher un bouton qui enverra les réponses à l'URL où au mailto spécifié dans ACTION du marqueur FORM.
• RESET : pour effacer toutes les réponses dans le bloc FORM.

• NAME=X : pour définir le nom de la variable qui recevra la réponse de l'INPUT.
• VALUE=X : pour spécifier une valeur qui peut être soit la valeur de réponse, soit le texte à afficher dans les boutons de transmission et d'annulation.
• SIZE=X : pour indiquer une zone de lecture (attention, il s'agit de la zone affichée à l'écran, pas de la zone réellement lue).
• MAXLENGTH=X : pour spécifier la taille maximale de la zone de lecture effectivement lue. N'affecte pas la dimension de la zone affichée.
• CHECKED : pour indiquer une valeur par défaut que vous aurez fixée.

Nous vous avons inséré un tout petit questionnaire type afin que vous puissiez visualiser les différents types d'INPUT disponibles. Nous avons jugé utile de vous transmettre également le résultat : ce que vous recevrez par E-Mail. Place à l'exemple, tout d'abord le script, puis ce qui sera réellement affiché :
<FORM METHOD="POST" ACTION="mailto:fverneau@free.fr">
<PRE>
Votre prénom : <INPUT TYPE="TEXT" NAME="firstname" SIZE="20" MAXLENGTH="20"><BR>
Votre nom : <INPUT TYPE="TEXT" NAME="name" SIZE="30" MAXLENGTH="30"><BR>
Votre adresse électronique : <INPUT TYPE="TEXT" NAME="EMail" SIZE="60" MAXLENGTH="80"><BR>
Votre âge :<BR>
<INPUT TYPE="RADIO" NAME="age" VALUE=1> 1 à 17 ans
<INPUT TYPE="RADIO" NAME="age" VALUE=2 CHECKED>18 à 25 ans
<INPUT TYPE="RADIO" NAME="age" VALUE=3> > à 25 ans<BR>
Quels sont les logiciels que vous utilisez ?
<INPUT TYPE="CHECKBOX" NAME="check01" VALUE="NetNav"> Netscape Navigator
<INPUT TYPE="CHECKBOX" NAME="check02" VALUE="IntExp"> Internet Explorer
<INPUT TYPE="CHECKBOX" NAME="check03" VALUE="Arena"> Arena<BR>
Votre activité principale :<BR>
<SELECT NAME="activite">
<OPTION>Archivage de données</OPTION>
<OPTION>Graphisme</OPTION>
<OPTION SELECTED>Jeux</OPTION>
<OPTION>Programmation</OPTION>
<OPTION>Serveur/Réseau local et étendu</OPTION>
<OPTION>Traitement de texte/Tableur</OPTION>
</SELECT>
Des suggestions :
<TEXTAREA NAME="comment" ROWS=4 COLS=80></TEXTAREA><BR>
<CENTER>
<INPUT TYPE="SUBMIT" VALUE="TRANSMETTRE"> <INPUT TYPE="RESET" VALUE="EFFACER">
</CENTER>
</PRE>
</FORM>

Votre prénom : 

Votre nom :    

Votre adresse électronique : 

Votre âge :

 1 à 17 ans
18 à 25 ans
 > à 25 ans

Quels sont les logiciels que vous utilisez ?
 Netscape Navigator
 Internet Explorer
 Arena

Votre activité principale :


Archivage de données
Graphisme
Jeux
Programmation
Serveur/Réseau local et étendu
Traitement de texte/Tableur

Des suggestions :


 

Nous avons inséré dans le formulaire, notre adresse E-Mail (voir ACTION et mailto), que vous pouvez remplacer par la vôtre pour que les réponses de votre formulaire puissent vous parvenir.
Nous avons également inséré un bloc PRE pour afficher le texte en préformaté et tabuler correctement les zones de lecture du nom et du prénom. Nous vous conseillons tout de même (pour une meilleure finition) d'utiliser le marqueur TABLE.
Toutes les commandes qui suivent dans le script ont été détaillées ci-dessus, nous n'allons pas recommencer ici, cet exemple vous montre la manière dont sont affichés les menus déroulants, les listes, les boutons et les cases.
Prenez cet exemple comme référence, il vous aidera à développer votre propre formulaire.
La commande CENTER sert à centrer les boutons submit et reset.
Le message E-Mail que vous allez recevoir contiendra (à titre indicatif) :

firstname=Georges&name=Clain&EMail=gclain@imaginet.fr&age=3
&check01=NetNav&check02=IntExp
&activite=Programmation&comment=Cette+page+me+semble+assez+claire+%21

Les marqueurs META