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 (&nbsp;) 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à!


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius