|
Les feuilles de style permettent de contrôler
la présentation d'une page HTML, y compris, donc, les éventuels
champs de formulaire qui y figurent. Pour illustrer cette possibilité,
nous nous proposons de détailler la réalisation d'une
boite de dialogue demandant l'e-mail de l'utilisateur et ressemblant
à ceci:
(cliquer dans la zone suivant "e-mail:" et observer le
résultat)
(ATTENTION: l'affichage correct n'est garanti que sous Internet
Explorer 5+ et Mozilla 0.9.5)
Il s'agit d'un tableau HTML de largeur 360, et ne comportant qu'une
cellule de hauteur 30. Cette cellule admet comme attribut "background"
une image de fond, de taille 360x30 pixels, réalisée
avec un outil de dessin comme Fireworks de Macromedia par exemple
(cette image se compose d'un rectangle au bords arrondis, d'un texte,
et d'une petite image "père noël"). La voici
au format gif:
On écrit donc, si notre image (effetformulaire.gif) est stockée
dans le répertoire "images" sous la racine de notre
site:
<table
width="360" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td background="/images/effetformulaire.gif"
height="30">
On peut bien sûr choisir une autre image à
condition d'adapter la largeur du tableau HTML à la largeur
de l'image choisie, et de ne pas attribuer une hauteur trop faible
à l'image (nous verrons pourquoi plus loin).
Dans la cellule que nous venons de définir, nous allons insérer
un champ de formulaire (champ texte mono-ligne). Il nous faut le
placer correctement pour qu'il ne recouvre pas le texte "e-mail:",
nous choisissons pour cela la facilité, en nous bornant à
insérer des espaces insécables ( ) en nombre
suffisant (par ailleurs, l'insertion d'un espace insécable
dispense d'utiliser un "gif invisible" de remplissage
pour s'assurer que la cellule s'affichera avec la hauteur - 30 pixels
- voulue).
En toute rigueur, il aurait mieux valu découper l'image gif
en deux, la première découpe incluant le texte "e-mail",
l'autre découpe le reste de l'image, et bâtir un tableau
HTML à deux colonnes donc deux cellules, où chaque
cellule aurait pour image de fond la partie adéquate de l'image
découpée.
Nous allons ensuite définir le style de notre champ texte:
nous choisissons les caractéristiques suivantes:
- police "Verdana" d'une hauteur de 12px par caractère;
- caractères gras;
- pas de bordure au champ texte;
- couleur de fond du champ texte identique à celle de l'image
(#eeeeee).
Nous écrivons donc:
<input type="text" style="font-size : 12px; font-weight:
bold;
font-family : Verdana, Helvetica, Sans-Serif; border : none; background-color
: #eeeeee" size="32" maxlength="255" name="email">
Nous choisissons une taille au champ (ici 32 caractères)
qui correspond à la taille de la police choisie au sein du
champ et à la taille de l'image gif choisie. Par ailleurs,
la taille de la police choisie est également adaptée
à la hauteur de l'image.
Et voilà!
|
Accueil
[