Hyper Texte Markup Language

  1. Introduction à HTML
  2. Le texte
  3. Les images
  4. Les liens
  5. Les tableaux
  6. Les frames
  7. Les formulaires
Annexe :

INTRODUCTION

HTML est un langage destiné à mettre en forme des présentations pour Internet. C'est un langage de balises basé sur les liens hypertextes. Mais qu'est-ce qu'une balise ? Une balise est un marqueur permettant d'appliquer un formatage particulier au contenu de cette balise. Ici, le texte mis entre l'ouverture et la fermeture de la balise "I" est formaté selon le nom de la balise (I = italique).

<I> Ce texte dans une balise "I" est affiché en italique </I>

* * *

Une balise s'écrit en minuscule, en majuscule ou en mixte, il est cependant conseillé de choisir une casse et de s'y tenir pour conserver un code "propre". Une balise est toujours écrite entre chevrons à l'ouverture et à la fermeture. Une balise ouvrante se présente toujours <nomdebalise>, et une balise fermante se présente toujours </nomde balise>. Une balise ouverte doit toujours être fermée pour que le navigateur sache où arrêter un formatage. Quelques balises, à fonction ponctuelle, acceptent de ne pas être fermées : c'est le cas de <BR> (saut de ligne), <HR> (ligne horizontale) et de <IMG> (appel d'une image).

Les balises peuvent s'imbriquer, c'est-à-dire qu'une balise peut s'ouvrir dans une autre balise. En revanche, il est important de toujours refermer la dernière ouverte avant de fermer celle qui la contient. Vous remarquerez que dans l'exemple plus loin la balise HTML étant la première ouverte sera la dernière fermée. La balise HEAD ouverte après HTML mais avant TITLE sera donc fermé après TITLE mais avant HTML. Exemple :

<B>on ouvre la balise "B" (gras), <U>puis la balise "U" (souligné),</U></B>
mais on prend soin de refermer la balise "U" avant la "B".

Chaque balise a une fonction précise et peut être complétée par des attributs. Les attributs sont toujours suivis d'un "=" et d'une valeur (alpha ou numérique) entre guillemets. Dans l'exemple ci-dessous, la balise "IMG" (appel d'une image) est complétée par les attributs "src" (URL, adresse ou source de l'image), "border" (taille de la bordure en pixels) et "title" (texte de l'info-bulle) :


<IMG src="pinpin.jpg" border="0" title="Pinpin, le Nain de Jardin">


* * *

Pour éditer du code HTML, il suffit d'ouvrir un logiciel de traitement de texte. Notepad (le bloc note) remplit simplement mais efficacement cet office. Tout document HTML est structuré ainsi :

<HTML>

  <HEAD>
    <TITLE> Ce titre s'affiche dans le bandeau en haut de la fenêtre</TITLE>
  </HEAD>

  <BODY>
    <!-- Ceci est un commentaire du code qui ne s'affichera pas à l'écran -->
    Ce texte s'affiche dans le corps (BODY) du document alors que les éléments en en-tête (HEAD) sont affiché dans le bandeau en haut de la fenêtre.
  </BODY>

</HTML>

Une fois le code tapé, il faut enregistrer le fichier avec l'extension ".html" ou ".htm". Il suffit alors de double cliquer sur ce fichier pour qu'il s'ouvre avec votre navigateur préféré. Une fois la page chargée dans le navigateur, vous pouvez accéder à la source de votre code soit par clic-droit + Afficher la source soit par le Menu Affichage + Source. Pendant l'écriture et les tests du code, gardez le code ouvert sous notepad pour pouvoir le modifier facilement. Attention ! Pour pouvoir observer les modifications dans le navigateur il faut enregistrer le code puis rafraîchir la page du navigateur (Affichage + Actualiser ou F5).

Il existe des logiciels qui permettent de créer des pages HTML facilement. Cependant, il me semble indispensable de comprendre le fonctionnement de l'ensemble du langage avant de se lancer dans ces logiciels, sinon, vous risquez d'avoir des difficultés lorsqu'il faudra plonger dans le code afin de modifier un point précis ou pour comprendre "pourquoi le logiciel fait ça alors que je lui demande ça".

* * *

Dans l'en-tête du document (<HEAD>), on peut insérer le titre de la fenêtre par la balise <TITLE>. C'est aussi dans cette partie que l'on placera les fonctions en JavaScript et l'appel des feuilles de style CSS.

La balise <BODY> encadre le corps du document, toute la zone d'affichage de fenêtre. Cette balise accepte quelques attributs :

Attention aux choix des couleurs de fond, de texte et de lien : évitez les couleurs et associations trop "flashy". De même ne placez pas en fond une image trop lourde (pas plus de 10 Ko), ni ayant trop de détails ou trop de couleurs sinon vous risquez de tuer le texte qui sera placé dessus. Choisissez un fond pâle si vous travaillez avec des polices foncées ou un fond sombre si votre texte est de couleur vive.

Pour ajouter un commentaire au code sans que celui-ci apparaisse dans la fenêtre du navigateur, il suffit d'insérer ce commentaire dans une balise <!-- commentaire --> (voir l'exemple ci-dessus).

* * *

La balise <META> sert pour le référencement des pages par certains moteurs de recherche. Cette balise doit être placée dans l'en-tête du document entre <HEAD> et </HEAD>. Il n'est pas indispensable d'en placer sur chaque page, mais au moins sur la page d'accueil. Il est à noter que le moteur de Google ne se sert pas de ces balises pour référencer les pages...


LE TEXTE

Les balises de base pour la mise en forme du texte sont <B> (gras), <I> (italique), <U> (souligné), <S> (barré) et <TT> (écriture type macine à écrire). Ces balises peuvent s'imbriquer et se compléter. Attention ! Le soulignement est utilisé par le navigateur pour visualiser les liens, il convient donc de ne pas trop en abuser.

Code :
Avant les balises, le texte est normal, <B>puis gras, <U>gras et souligné</U></B>, normal à nouveau et enfin <U><B><I>souligné,gras et italique</U></B></I>.

Résultat :
Avant les balises, le texte est normal, puis gras, gras et souligné, normal à nouveau et enfin souligné,gras et italique.

On utilise <SUP> pour mettre un caractère en exposant et <SUB> pour mettre en indice.

La 1ère chose à savoir est que CaCO3 correspond à de la calcite.

Les caractères spéciaux (accents, cédille) ne sont pas toujours affichés correctement par les navigateurs (en particulier les anciennes versions mais aussi les navigateurs n'utilisant pas les polices occidentales). Il convient donc d'utiliser pour cela des codes. Le code se compose de "&" (début du cractère spécial), de la lettre, de l'accentuation à appliquer à cette lettre, d'un ";" (fin du cractère spécial). Cela étant assez pénible pour les textes très longs, il est intéressant de ne pas en tenir compte dans un premier temps et d'ouvrir le code ensuite dans un éditeur ayant la fonction "Remplacer par". Voir une liste des Caractères Spéciaux.

Pour écrire : "Étrangement, ça disparaît à droite !"
On code : &Eacute;trangement, &ccedil;a dispara&icirc;t &agrave; droite !

* * *

La balise FONT permet d'agir directement sur la police grâce aux attributs suivants :

Code :<FONT face="Comic sans MS" size="5" color="#0000FF">Avec la balise Font</FONT> - Sans la balise FONT
Avec la balise FONT - Sans la balise FONT

* * *


Le saut de ligne est obtenu par la balise <BR>. Un texte mis entre les balises <P> et </P> sera considérer comme un paragraphe et appliquera automatiquement un saut de ligne à la fin. La balise <DIV> permet de définir une division dans laquelle peuvent être insérés des images et/ou du texte.<DIV> et <P> peuvent s'utiliser pour faire des marques de paragraphes avec indentation mais <P> appliquera toujours un saut de ligne après le paragraphe (l'indentation se fait grâce aux feuilles de style). Les balises <DIV> et <P> acceptent comme attribut align qui permet d'aligner son contenu selon les valeurs suivantes :

Une citation peut être mise en évidence par la balise <BLOCKQUOTE> qui opère un rétrécissement automatique des marges.

Une citation peut être mise en évidence par la balise <BLOCKQUOTE> qui opère un rétrécissement automatique des marges.

Le trait de séparation horizontal s'obtient avec la balise <HR>, qui admet les attributs align, size (épaisseur), width (largeur en % ou pixel) et noshade (supprime l'ombrage, ne pas y associer une valeur).


* * *

Les titres sont affichés par la balise <Hn>, où n est compris entre 1 et 6. Un titre de niveau 1 (H1) est plus grand qu'un titre de niveau 4 (H4). Les titres sont alignés à gauche par défaut et un saut de ligne est effectué automatiquement.

Titre de niveau 2

* * *

Les listes peuvent être soit ordonnées <OL> soit à puces <UL>. Chaque élément de la liste est déclaré par une balise <LI>. <OL> peut prendre comme attribut start (indique à quel niveau commencer la numérotation) et type=1,i,I,a,A (choix du type de numérotation), <LI> peut aussi avoir un attribut value permettant de forcer la numérotation pour sauter des numéros. <UL> admet comme attribut Type=disc,circle,square qui indique la forme de la puce. Le sommaire en haut de cette page est un exemple de liste ordonné avec imbrication de listes à puces. Exemple de code pour une liste ordonnée:

<OL>
    <LI>Premier
    <LI>Deuxième
    <LI>Troisième
</OL>

Une liste de définitions est déclarée par la balise <DL>. <DT> permet de présenter le terme et <DD> permet de le définir.

DL
Liste de définitions (<DL>...</DL>).
DT
Terme à définir aligné à gauche et saut de ligne.
DD
Définition avec retrait automatique par rapport au terme.


LES IMAGES

HTML supporte principalement deux formats d'images : le JPG et le GIF. Chacun de ces deux formats a ses avantages et ses inconvéniants. Le temps de chargement des pages devant être la principale préoccupation lors de la création de page en HTML, le format et le poids en octets des images doivent être réfléchis. JPG et GIF ont l'avantage d'être tous deux des formats très compressés. En revanche, leur méthode de compression diffère.

Le JPG compresse l'image en détruisant certains pixels de l'image afin de l'alléger. Certains logiciels, et en particulier Photoshop, permettent de définir le taux de compression du JPG : plus la taille de l'image est faible, moins bonne est sa définition, et au contraire, une image de très bonne qualité sera peu compressée et donc longue à charger. Il faut donc trouver le bon taux de compression pour garder une image correcte mais rapide à télécharger (un taux entre 3 et 10 dans Photoshop, 6 étant un bon compromis, mais cela peut varier selon les images).

Le GIF compresse l'image en limitant le nombre de couleurs entre 1 et 256 sans détruire les pixels (alors que le JPG peut avoir jusqu'à 16 millions de couleurs). Les logiciels de DAO (Photoshop - c'est celui que je pratique), permettent de choisir le nombre de couleurs afin de compresser l'image au mieux. Ainsi, une petite image composée d'un fond uni et d'un texte coloré pourra se contenter de 2 couleurs et sera ainsi compressée au maximum sans perte de détails. En revanche, une photographie supportera plus ou moins bien la limitation à 256 couleurs, ce format sera donc réservé pour les images noir & blanc, les schémas ou les petites vignettes. Enfin, le GIF a un avantage certain par rapport au JPG : il supporte la transparence, l'entrelacement et l'animation. La transparence permet de rendre invisible le fond d'une image (idéal pour les logos, voir celui de l'Université de Tours juste en dessous). L'entrelacement affiche l'image d'abord avec une résolution grossière puis améliore la résolution au fur et à mesure du chargement de l'image (le visiteur peut donc avoir une idée de l'image qui se charge avant que le chargement soit terminé). L'animation est en réalité une succession d'images : les GIFs animés ne s'obtiennent que par des logiciels spéciaux (Animation Shop par exemple)

Avec la version 6 de Photoshop (encore ?), il existe un menu permettant de faire un test comparatif entre différents formats de compression JPG et GIF : on y voit la qualité de l'image et sa taille en sortie... très pratique. Information indicative : essayez de ne pas dépasser 10 Ko pour les vignettes et 100 Ko pour les images de taille courante. Il est dommage d'imposer aux visiteurs le chargement systématique des grandes images : préférez utiliser des vignettes sur lesquelles le visiteur pourra cliquer s'il désire voir l'image en grand.

* * *

La balise <IMG> permet l'appel d'une image par le biais de l'attribut src qui indique l'adresse (ou URL) de l'image.




<IMG src="http://www.univ-tours.fr/lat/Images/logo.png">




Cette balise a aussi pour attributs :


LES LIENS

Les liens sont la plus grande richesse d'HTML et ce qui fait qu'Internet est un réseau immense. On peut distinguer 4 types de liens :

Les URL (ou adresses) peuvent être exprimées de deux manières :

<href="fichier1.html"> : le fichier se trouve dans le même répertoire.
<href="dossier2/fichier2.html"> : le fichier se trouve dans le répertoire "dossier2" qui est au même niveau d'arborescence que la page courante.
<href="../fichier4.html"> : le fichier se trouve dans le même répertoire que le dossier contenant le fichier courant (".." permet de remonter d'un répertoire).
<href="../dossier3/fichier3.html"> : le fichier se trouve dans le répertoire "dossier3" qui se trouve dans le même dossier dans lequel se trouve le dossier contenant le fichier courant.

dossier1
      dossier2
            fichier2.html
      fichier1.html
      page courante.html
dossier3
      fichier3.html
fichier4.html

href="http://oliviermarlet.free.fr/alt.html"

* * *

Comment créer un lien ? La balise principale est <A>. Pour qu'un mot ou une image devienne un lien, il suffit de placer l'élément entre une balise <A> et </A>.


<A href="#link"><IMG src="images/pinpin.jpg"></A>
Cliquez sur <A href="#link">ce lien</A>

            Cliquez sur ce lien

Les attributs d'un lien sont :

Détaillons l'attribut target. Dans l'utilisation des frames, chaque cadre doit comporter un nom. Un lien dans un cadre peut alors pointer vers un autre cadre grâce à l'attribut target. Si le cadre de gauche s'appelle "menu" et celui de droite "principale", un lien dans "menu" peut pointer vers une page qui s'affichera dans "principale". Les autres valeurs de l'attribut target :

Il est possible d'appliquer une URL par défaut à l'ensemble de la page avec la balise <BASE> ayant l'attribut href qui prend pour valeur cette URL. Cette balise se place dans l'en-tête du document et ne se ferme pas.

<BASE href="http://www.monsite.fr/exemples">
<IMG src="exemple1.jpg">
<IMG src="exemple2.jpg">

Dans cet exemple, les deux images sont chargées depuis la même adresse de base.

* * *

La balise <MAP> permet d'appliquer à une image un mapping par zone rendant l'image réactive. Cette balise peut être placée en fin du document HTML après la fermeture du corps de page (</BODY>) et est appelée par l'attribut usemap de l'image concernée. Une <MAP> doit toujours être désignée au moyen de l'attribut name. Chaque zone réactive est définie par la balise <AREA> qui admet les attributs suivants :

Le menu en en-tête de cette page est une image réactive permettant d'accéder aux différents thèmes du menu. Dans l'exemple suivant ont été définies des zones (AREA) qui affichent des info-bulles.

<IMG src="images/exemple.gif" usemap="#exemple">

<map name="exemple">
            <area shape="rect" coords="4,5,60,33" title="Un rectangle">
            <area shape="circle" coords="75,53,21" title="Un cercle">
            <area shape="poly" coords="48,44,20,50,8,63,5,94,84,94,91,77,62,86,28,68" title="Un polygone">
</map>

Il existe des logiciels réalisant du mapping. Photoshop vous permet aussi de le faire puisqu'il affiche les coordonnées du curseur sur l'image (Fenêtre/Afficher Infos). Il suffit de noter chaque coordonnées une à une et de les recopier dans le code.


LES TABLEAUX

En HTML, les tableaux permettent deux choses : de faire des tableaux (logique...) et de formater la mise en page d'une fenêtre. Le principe est simple. Il suffit de concevoir sa page en insérant chaque élément dans une cellule du tableau et de rendre les bordures du tableau invisible afin que seul les éléments apparaissent.

L'ouverture d'un tableau se fait par <TABLE> et sa fermeture par </TABLE>. On peut y insérer des lignes <TR> et, dans ces lignes, des cellules <TD>. Il est possible de fusionner plusieurs cellules ou plusieurs lignes. Le navigateur lit le tableau ligne par ligne. Cela signifie que pour fusionner deux cellules d'une même colonne, il faut le déclarer dès la première ligne. Voici un exemple qui sera commenté ensuite.

<table width="240" border="1" cellspacing="2" cellpadding="1" bgcolor="#eeeeee">
  <caption>Exemple de tableau</caption>
    <tr bgcolor="#aaaaaa">
      <th width="80">Titre 1</th>
      <th width="80" bgcolor="#ffffff">Titre 2</th>
      <th width="80">Titre 3</th>
    </tr>
    <tr>
      <td colspan="3">3 cellules fusionnées en ligne</td>
    </tr>
    <tr>
      <td rowspan="2" width="80">2 cellules fusionnées en colonne</td>
      <td width="80"></td>
      <td width="80">&nbsp;</td>
    </tr>
    <tr>
      <td width="80" align="right">cellule</td>
      <td width="80" align="center">cellule</td>
    </tr>
</table>
Exemple de tableau
Titre 1 Titre 2 Titre 3
3 cellules fusionnées en ligne
2 cellules fusionnées en colonne  
cellule cellule


Le même avec border="0"
Titre 1 Titre 2 Titre 3
3 cellules fusionnées en ligne
2 cellules fusionnées en colonne  
cellule cellule

La balise <TABLE> admet plusieurs attributs :

<CAPTION> crée une ligne supplémentaire et y insère un titre centré, soit au-dessus du tableau (align="top") soit en dessous (align="bottom").

<TR> ouvre une nouvelle ligne au tableau, il peu également recevoir un attribut bgcolor bien qu'il hérite de celui de <TABLE>. Dans l'exemple ci-dessus, la couleur de fond du tableau est un gris claire et la couleur de la ligne est un gris foncé : les autres lignes gardent la couleur par défaut du tableau.

Les cellules peuvent être des cellules d'en-tête (<TH>) dont le contenu est en gras et centré, ou des cellules de données (<TD>). Ces cellules de données peuvent contenir du texte, des liens, des images et même d'autres tableaux ! Une cellule vide (celle du milieu dans notre exemple) est présentée non visible alors qu'une cellule avec un espace insécable (&nbsp;) apparait mais sans donnée. Comme pour les lignes par rapport au tableau, les cellules héritent de la couleur de la ligne à moins qu'un attribut bgcolor ne définisse une autre couleur (c'est le cas de "Titre 2" dans notre exemple). Les attributs d'alignement du contenu dans la cellule sont :

La fusion de plusieurs cellules se fait par les attributs : Regardez l'exemple pour bien comprendre comment fonctionnent ces fusions. Les cellules ont aussi un attribut de largeur (width="n") exprimé lui aussi en pixel (sans unité) ou en pourcentage (%). Il est à noter que si l'on souhaite fixer la largeur de certaine cellule par cet attribut, il est également possible d'indiquer au navigateur d'adapter la taille de la cellule (ou même du tableau) en fonction de l'espace disponible dans la fenêtre. Pour cela, il faut donner à l'attribut width la valeur "*". L'attribut height permet de forcer la cellule à prendre une hauteur précise en pixel, en revanche, toutes les cellules d'une ligne prendront toujours la hauteur de la plus grande cellule.


LES FRAMES

Les frames sont une division de la fenêtre principale en plusieurs sous-fenêtres qui appellent chacune une page HTML différente. Dans la pratique, cela permet de créer un menu dans un cadre permanent sur la gauche et un cadre où s'affiche les pages consultées grâce aux liens du menu. Pour cela, il faut créer une page qui formate la position des différents cadres et qui appelle les pages HTML à charger dans chacun des cadres.
Les frames sont à éviter autant que faire ce peut car ils ont plusieurs inconvénients. L'utilisation des frames ne permet pas au visiteur de savoir sur quelle page il se trouve ; en effet, l'url indiquée dans la barre d'adresse est celle du frame conteneur et non de la page active... De plus, le chargement est plus lourd car le navigateur doit actualiser au moins trois pages : le frame conteneur et les deux frames contenus. Il est conseillé de ne les utiliser que si cela est justifié (avoir un menu permanent par exemple).
Voici un exemple qui sera commenté ensuite.

La page principale :
<HTML>
<HEAD>
<TITLE>Exemple de frames</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
<FRAME SRC="cadre1.html name="menu">
<FRAME SRC="cadre2.html name="consult">
</FRAMESET>
</HTML>

La page "cadre1.html"
<HTML>
<BASE target="consult">
<BODY>
<A href="themea.html">thème A</A><BR>
<A href="themeb.html">thème B</A><BR>
<A href="themec.html">thème C</A><BR>
</BODY>
</HTML>

La page "cadre2.html"
<HTML>
<BODY>
Ceci est la page d'accueil.
Veuillez choisir un thème du menu.
Bonne navigation !
</BODY>
</HTML>
Exemple de frames
theme A
theme B
theme C
Ceci est la page d'accueil.
Veuillez choisir un thème du menu.
Bonne navigation !

Dans cet exemple, la page principale n'affiche dans la fenêtre que le titre de l'en-tête. En revanche, elle positionne les cadres et appelle les pages qui doivent s'y afficher. Le positionnement des cadres se fait par la balise <FRAMESET> qui a pour attributs :

Une fois les cadres positionnés, il faut appeller les pages HTML par la balise <FRAME>. Celle-ci a donc pour attributs : La balise <BASE> en en-tête permet de définir une destination des liens par défaut : ici tous les liens du menu sont renvoyés dans la fenêtre consult. L'attribut target permet à un lien de savoir comment afficher la nouvelle page (il est ici associé à la balise <BASE> car la destination est toujours la même, mais il est autrement attribut de la balise de lien <A>) : Il est possible de mélanger des frames verticaux et horizontaux :

La page principale :
<HTML>
<HEAD>
<TITLE>Exemple de frames 2</TITLE>
</HEAD>
<FRAMESET rows="10%,*">
<FRAME SRC="publicite.html name="pub">
<FRAMESET cols="20%,*">
<FRAME SRC="cadre1.html name="menu">
<FRAME SRC="cadre2.html name="consult">
</FRAMESET>
</HTML>
Exemple de frames 2
Pub
theme A
theme B
theme C
Ceci est la page d'accueil.
Veuillez choisir un thème du menu.
Bonne navigation !

Pour les navigateurs ne reconnaissant pas les frames, il faut ajouter après ceux-ci une balise <NOFRAMES>. Les anciens navigateurs, ne reconnaissant ni la balise Frame ni la balise Noframe, afficheront le contenu de celles-ci, c'est-à-dire le texte contenu entre les balises <NOFRAMES> et </NOFRAMES>.

<NOFRAMES>
Désolé votre navigateur est un peu dépassé et ne peut afficher les frames, vous devriez actualiser votre navigateur internet.
</NOFRAMES>

Il est bien sûr possible de faire un menu dans un bandeau horizontal en haut ou en bas de l'écran, de faire le menu principale à droite et un sous-menu qui s'affiche dans le cadre de gauche... tout est possible ! Mais n'abusez pas des frames qui sont gourmands en temps de chargement : deux ou trois sont suffisants, quatre est un maximum.


LES FORMULAIRES

Le formulaire est un bon moyen de communiquer avec vos visiteurs pour leur demander leur avis sur ce qu'ils ont vu sur votre site, sur ce qu'ils souhaiteraient y voir... Pour déclarer un formulaire dans une page HTML, il faut déclarer celui-ci avec la balise <FORM> et fermer le formulaire avec la balise </FORM>. On définit en attributs la manière dont les données du formulaire sont envoyées :

Il existe 4 grands types d'éléments de formulaire. Les séléctions simples (cases à cocher, boutons...), les listes de choix, les zones de texte libre et les boutons de gestion du formulaire (envoyer, annuler).
Les séléctions simples se font par la balise <INPUT> :

Voici les exemples avec <INPUT>:

Text maxlength="5".
Password maxlength="10".
Checkbox checked (= coché par défaut).
Radio
Hidden (value="hidden").
File (pour envoyer une pièce jointe).
Image src="images/arbre.gif".
Button value="bouton sans fonction".
Submit value="Envoyer".
Reset value="Recommencer" (annule toutes les saisies).

Les listes choix se font par la balise <SELECT> dont on définit le nombre de choix (size), le nom à associer à la réponse (name) et multiple si le visiteur a le droit de faire plusieurs choix dans la liste (avec la touche Maj ou Ctrl). Chaque choix de la liste est défini par la balise <OPTION> pour laquelle on donne une valeur (value).

<TEXTAREA> permet de créer une zone de texte libre avec un attribut de nom (name) et deux attributs qui indiquent la taille de la zone : rows (nombre de lignes de caractères) et cols (nombre de colonnes de caractères).

Enfin, les boutons permettant l'envoi ou l'annulation du formulaire se font par la balise <BUTTON> qui, comme toujours, doit être nommé (name). On lui définit également :

Voici les exemples avec <SELECT>, <TEXTAREA> et <BUTTON>:

Quelle est ta couleur préférées ?



Voici un exemple complet avec son code source.

Nom : Prénom :
Âge : Sexe : masculin féminin
Vous maîtrisez :
HTML
CSS
JavaScript
XML
XSL
SVG

<form action="mailto:login@serveur.fr" methode="post" enctype="text/plain">
      <table><tr><td>
            Nom : <input type="text" name="nom" size="20">
      </td><td>
            Prénom : <input type="text" name="prenom" size="20">
      </td></tr><tr><td>
            Âge : <select size="1" name="age">
                  <option value="-18 ans">-18 ans
                  <option value="18/25 ans">18/25 ans
                  <option value="25/40 ans">25/40 ans
                  <option value="+40 ans">+40 ans
            </select>
      </td><td>
            Sexe : <input type="radio" name="sexe" value="masc"> masculin
            <input type="radio" name="sexe" value="femi" checked> féminin
      </td></tr><tr><td>
            Vous maîtrisez :<br>
            <input type="checkbox" name="html"> HTML<br>
            <input type="checkbox" name="css"> CSS<br>
            <input type="checkbox" name="js"> JavaScript<br>
            <input type="checkbox" name="xml"> XML<br>
            <input type="checkbox" name="xsl"> XSL<br>
            <input type="checkbox" name="svg"> SVG<br>
      </td><td>
            <textarea name="avis" rows="8" cols="22">Que souhaiteriez-vous voir figurer sur ce site ?</textarea>
      </td></tr><tr><td align="right">
            <button type="submit">Envoyer</button>
      </td><td>
            <button type="reset">Recommencer</button>
      </td></tr></table>
</form>

Notez que lorsque deux boutons radios ont le même nom (c'est le cas de sexe), la sélection de l'un provoque la désélection de l'autre. On peut ainsi proposer une liste de choix où le visiteur ne peut cocher qu'une seule rubrique. Il est possible d'inclure des scripts JavaScript pour contrôler les saisies (le mot de passe par exemple).


Haut de page

Cliquez sur un élément de l'image
Dernière mise à jour
15 février 2010

Imprimer