introduction honteusement repompée sur l’article de Pascale sur les tableaux
Avec le support du positionnement CSS dans l’immense majorité des navigateurs, les inconvénients liés à la mise en page par tableaux n’ont plus lieu d’être subis, à moins de devoir fournir une mise en page identique à l’antique Netscape 4. Aussi, le présent article se concentrera sur la mise en forme des formulaires.
Afin de compléter ce point de vue, lire l’article sur l’utilisation des formulaires.
Exemple de formulaire:
<form action="">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" id="nom" />
</fieldset>
</form>
Les étiquettes sont affichées sous forme de bloc pour pouvoir flotter à gauche des contrôles. Les contrôles sont également affichés en tant que blocs et possèdent une marge égale à la largeur de leur étiquette.
label{
display: block;
float: left;
width: 5em;
}
input{
display: block;
margin-left: 5em;
}
Exemple de formulaire:
<form action="">
<fieldset>
<label for="nom">
Nom : <input type="text" id="nom" />
</label>
</fieldset>
</form>
On peut facilement positionner les composant en utilisant judicieusement les propriétés position: absolute et position: relative.
Il suffit d’afficher les étiquettes en tant que bloc et de les positionner de manière relative. La positionnement en relatif permettra de positionner le composant qui se trouve à l’intérieur de manière absolue.
label{
display: block;
position: relative;
}
label input{
position: absolute;
left: 0;
}
Les champs et leur étiquettes possèdent un lien fort et on peut considérer, d’un point de vue logique, que lorsqu’on renseigne un champ, on définit une valeur pour l’étiquette associée. D’où l’idée d’utiliser un liste de définition (<dl>) pour baliser une liste de champs.
Exemple de formulaire
<form action="">
<fieldset>
<dl>
<dt><label for="nom">Nom : </label></dt>
<dd><input type="text" id="nom" /></dd>
</dl>
</fieldset>
</form>
L’un des avantages de ce marquage est qu’il se dégrade bien dans les navigateurs ayant un support limité des CSS.
Propriétés intéressantes à style:
Attention à Internet Explorer : Lorsqu’une étiquette <legend> est placée, elle étend la zone d’affichage du <fieldset>. Cependant, la bordure du <fieldset> ne suit pas cet agrandissement et provoque un affichage inattendu: le couleur de fond déborde de la zone délimitée par la bordure.
Propriétés intéressantes à style:
Les étiquettes <label> permettent d’associer du texte à un élément de formulaire. Lorsqu’un étiquette reçoit le focus, elle le transmet au contrôle associé (http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1). Dans un navigateur graphique, le clic sur l’étiquette permet généralement d’activer le champ associé. Il est intéressant d’expliciter ce comportement en transformant le pointeur en “main” comme pour les liens.
label{
cursor: pointer;
cursor: hand; /* pour IE */
}
Les champs de texte, les champs pour mot de passe, les cases à cocher, les boutons radio, les boutons d’envoi et de remise à zéro ont tous un point commun: leur balise XHTML est <input />. Seul leur attribut type les différencie les uns des autres. Pour les différencier dans une feuille de style il suffit d’utiliser un sélecteur basé sur l’attribut:
input[type=text]{
/* Pour styler les champs de texte */
}
input[type=submit]{
/* Pour styler les boutons d'envoi */
}
Malheureusement, ce sélecteur n’est pas compris (au moment de l’écriture) par tous les navigateurs. Une solution est donc de créer des classes distinctes pour chaque type de contrôle.
.text{
/* Exemple de classe pour les champs de texte */
}
.submit{
/* Exemple de classe pour les boutons d'envoi */
}
Les propriétés qui sont modifiables sont: *background : arrière-plan. *color : couleur d’avant-plan. *border : bordure. *font: police de caractères.
Ces deux contrôles sont assez problèmatiques car leur aspect presque jamais être personnalisé. La plupart des navigateurs utilisent les contrôles du systèmes ou des contrôles peu modifiables.
Les propriétés qui sont parfois modifiables sont: *background : arrière-plan. *color : couleur d’avant-plan. *border : bordure. *font-size : taille de la police de caractères.
L’une des seules solutions pour obtenir des cases à cocher et des boutons radio personnalisés est de faire appel à du Javascript qui se chargera de les remplacer par des images et d’étendre leur comportement à ces images.
Pour ce type de contrôle, le problème est le même que pour les boutons radio et les cases à cocher: son aspect est très peu modifiable.
Une méthode sur Quirksmode: http://www.quirksmode.org/dom/inputfile.html
On peut personnaliser chaque option indépendamment.