Comment créer un formulaire HTML
Les formulaires apportent la vraie interactivité, celle qui donne vie au Web! Aussi sophistiquées qu'elles soient, sans formulaires vos pages HTML sont en lecture seule. Les formulaires permettent à l'utilisateur de vous renvoyer un commentaire sur vos pages, de spécifier un critère de recherche dans une base de données ou encore d'effectuer un choix complexe parmi plusieurs alternatives.
Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. Ces champs doivent être définis à l'intérieur d'une section formulaire délimitée par <FORM>
et</FORM>
.
Note: Ce document explique comment réaliser des pages HTML contenant un formulaire, mais pas comment vous pouvez récupérer et traiter les données que l'utilisateur a entrées dans ledit formulaire. Nous verrons comment effectuer ce traitement lorsque nous aborderons la Common Gateway Interface.
Transmission des données
Le marqueur FORM
accèpte plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.
ACTION="url"
permet d'indiquer l'URL de la page, ou plutôt du programme CGI à appeler lorsque l'on clique sur le bouton de validation. L'attribut METHOD
permet d'indiquer la méthode de transmission des données saisies dans le formulaire. Il y en a deux:
- La méthode
GET
est la méthode par défaut. Elle consiste à concatèner les données du formulaire à l'URL, après avoir inséré un point d'intérrogation. On obtient alors une URL du typehttp://www.dom.org/chemin/prog.html?données
. - La méthode
POST
consiste à envoyer les données au serveur dans le corps de la requête plutôt qu'en tant que partie de l'URL.
Il est recommandé d'utiliser la méthode POST.
L'attribut ENCTYPE
permet de spécifier la manière dont doivent être encodées les données envoyées par la méthode POST. Seule la méthode par défaut peut être utilisée pour l'instant: application/x-www-form-urlencoded
.
Comment créer un tableau HTML
HTML 3.0 permet de mettre en forme des tableaux. Cette fonction est également supportée dans une version réduite par Netscape Navigator depuis la version 1.1 et d'autres browsers actuels.
Les marqueurs à utiliser sont les suivants:
<TABLE>
et</TABLE>
encadrent l'ensemble de la définition du tableau. Par defaut les cellules du tableau ne sont pas encadrées. En spécifiant l'attributBORDER
votre tableau aura un aspectquadrillé.
Pour définir le contenu du tableau vous utiliserez les marqueurs suivants:<CAPTION>
permet de définir le titre du tableau. Par défaut, ce titre apparaît au dessus du tableau. Si vous voulez le faire apparaitre en dessous, utilisez l'attributALIGN=BOTTOM
.<TR>
permet de définir une ligne du tableau. Il doit y avoir autant de<TR>
que de lignes dans le tableau. En théorie, chaque ligne doit se terminer par</TR>
mais ceci est optionnel.
Pour définir le contenu de chaque ligne, vous utiliserez les marqueurs suivants:<TD>
permet de définir une cellule de données. Vous pouvez définir des cellules vides.<TH>
permet de définir une cellule de titre. Le contenu d'une telle cellule apparait généralement en gras par rapport à une cellule de données. Ce type de cellule est normalement utilisé pour donner un titre à chaque ligne et à chaque colonne.
Le texte à l'intérieur des cellules peut être aligné grâce aux attributs suivants de TD
et TH
: (Si ils sont utilises comme attributs de TR
, ils s'appliquent à une ligne complète)
ALIGN=
qui peut prendre les valeurs LEFT, CENTER ou RIGHT.VALIGN=
qui peut prendre les valeurs TOP, MIDDLE, BOTTOM ou BASELINE.
Vous trouverez ci-dessous un exemple de tableau contenant un titre, des cellules de titre, des cellules de données et des cellules absentes/vides.
Couleurs | Rouge | Vert | Bleu |
---|---|---|---|
Rouge | Jaune | Magenta | |
Vert | Jaune | Cyan | |
Bleu | Magenta | Cyan |
Ceci a été obtenu grâce au code source suivant:
<TABLE BORDER> <CAPTION ALIGN=BOTTOM> Melange de couleurs </CAPTION> <TR><TH> Couleurs </TH><TH> Rouge </TH><TH> Vert </TH><TH> Bleu </TH></TR> <TR><TH> Rouge </TH><TD> </TD><TD> Jaune </TD><TD> Magenta </TD></TR> <TR><TH> Vert </TH><TD> Jaune </TD><TD> </TD><TD> Cyan </TD></TR> <TR><TH> Bleu </TH><TD> Magenta </TD><TD> Cyan </TD><TD> </TD></TR> </TABLE>
Il est également possible de fusionner plusieurs cellules, soit horizontalement, soit verticalement, grâce aux attributs suivants de TD
:
COLSPAN=
x ou x est le nombre de colonnes standard que doit couvrir cette cellule large.ROWSPAN=
y ou y est le nombre de lignes standard que doit couvrir cette cellule haute.
Voici un exemple:
A | 3 | ||
B | 2 | ||
Coin! | 1 |
---|
Ceci a été obtenu grace au code source suivant:
<TABLE BORDER> <caption> On rigole</caption> <tr> <td COLSPAN=3> A </td> <td ROWSPAN=3> 3 </td> </tr> <tr> <td COLSPAN=2> B </td> <td ROWSPAN=2> 2 </td> </tr> <tr> <th> Coin! </th> <td> 1 </td> </tr> </TABLE>
Voici un dernier exemple sans bordure:
Article | Prix |
---|---|
Papier | 44.99 |
Encre | 178.55 |
<TABLE> <TR><TH>Article</TH><TH>Prix</TH> <TR><TD ALIGN=RIGHT>Papier</TD><TD ALIGN=RIGHT>44.99</TD> <TR><TD ALIGN=RIGHT>Encre</TD><TD ALIGN=RIGHT>178.55</TD> </TABLE>
HTML: Motif de fond et couleurs
Motif de fond
HTML 3.0 permet de définir un motif de fond pour vos pages. Cette fonction est également supportée par Netscape Navigator depuis la version 1.1, en tant qu'extension de la norme HTML 2.0.
Ceci est obtenu par l'adjonction de l'attribut BACKGROUND
au marqueur BODY
de votre document, comme ceci:
<BODY BACKGROUND="image_de_fond.gif"> Votre document... </BODY>
Note: Cette méthode est aujourd'hui totalement obsolète. Tournez vous plutôt vers CSS.
Couleurs
L'inconvénient avec certains motifs de fond, c'est que bien souvent, ils rendent impossible la lecture du texte qui s'affiche, par défaut, en noir. Pour remédier a ce probleme, Netscape a integré des attributs supplémentaires au marqueur BODY
. Ces attributs ne font pas partie de la norme HTML.
TEXT
permet de fixer la couleur du texte du document. Par défaut, le texte est généralement noir, sur cette page il est blanc.LINK
permet de fixer la couleur des liens du document. Par défaut, les liens sont généralement bleu, sur cette page ils sont vert clair.VLINK
permet de fixer la couleur des liens une fois qu'ils ont ete visites. Par défaut, ils sont généralement violets, sur cette page ils sonts vert foncé.ALINK
permet de fixer la couleur des liens actifs, c'est a dire la couleur qu'ont les liens au moment ou vous cliquez dessus. Par défaut, ils sont alors généralement rouges, sur cette page, ils sont jaunes.BGCOLOR
permet de fixer la couleur du fond du document. Cette couleur sera utilisée a la place du gris ou du blanc habituel si vous n'avez pas indiqué d'image de fond avec l'attributBACKGROUND
ou si cette image n'a pas pu etre chargée pour une raison quelconque.
Pour cette page, nous avons utilisé la définition suivante:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FF00" VLINK="#00A000" ALINK="#FFFF00" BACKGROUND="image_de_fond.gif"> Votre document... </BODY>
Les codes de couleur doivent être interprétés de la manière suivante: derrière le dièse, on trouve six caractères qu'il convient de grouper deux par deux. Ces groupes de deux caractères représentent l'intensité des couleurs de base rouge, vert et bleu (dans l'ordre) sous forne d'un nombre hexadécimal compris entre 00 et FF.
HTML: Comment intégrer une image
Vous avez sans doute remarqué que beaucoup de pages HTML sur le Web intègrent des images dans le texte. C'est plus agréable à l'oeil, mais plus long à charger. Quoi qu'il en soit, vous pouvez faire de même en sauvegardant vos images à intégrer au format GIF et en les référençant dans le marqueur <IMG>. (Certains clients accepteront également le JPEG, mais pas tous!)
Une image intégrée peut être alignée de différentes façons avec le texte:
Top:
Middle:
Bottom:
Voici comment on été intégrées les images ci-dessus:
Top: <IMG SRC="image.gif" ALIGN=TOP ALT="WWW"> Middle: <IMG SRC="image.gif" ALIGN=MIDDLE ALT="WWW"> Bottom: <IMG SRC="image.gif" ALIGN=BOTTOM ALT="WWW">
L'alignement par défaut est BOTTOM
.
Les browsers plus récents permettent également d'aligner une image à gauche ou à droite du texte. Vous pouvez vous en rendre compte ici si votre browser supporte cette fonction.
Pour ce faire, il suffit d'utiliser l'attribut ALIGN=LEFT
ou ALIGN=RIGHT
.
Ensuite, si vous voulez continuer à écrire en dessous de l'image insérée et non plus à côté, vous devez insérer un marqueur <BR> comme ceci:
<BR CLEAR=ALL>
Vous pouvez également utiliser CLEAR=LEFT
si vous souhaitez écrire en dessous de l'image de gauche mais pas forcément en dessous de l'image de droite. De même pour CLEAR=RIGHT
.
Gardez toujours à l'esprit que certains clients seront totalement incapables d'afficher des images. Dans ce cas, ils pourront cependant afficher un texte de remplacement, pour peu que vous l'ayez spécifié dans le marqueur à l'aide du paramètre ALT="...".
HTML: Caractères spéciaux et accentués
Certains caractères sont interprétés par HTML et ne peuvent être insérés tels quels dans le texte d'une page. Il faut alors utiliser des séquences d'échappement:
- <
- permet d'obtenir un <
- >
- permet d'obtenir un >
- &
- permet d'obtenir un &
- "
- permet d'obtenir un "
De même, si vous ne pouvez pas générer des fichiers codés avec le jeu de caractères ISO-Latin-1, vous pouvez utiliser des séquences d'échappement pour produire des caractères accentués. Voici quelques exemples:
- é
- permet d'obtenir un é
- È
- permet d'obtenir un È
- ê
- permet d'obtenir un ê
- ë
- permet d'obtenir un ë
- ï
- permet d'obtenir un ï
- ô
- permet d'obtenir un ô
- ç
- permet d'obtenir un ç
- ñ
- permet d'obtenir un ñ