Formulaires et CSS

Les feuilles de style sont puissantes, on ne le répètera jamais assez. Au delà du texte, les CSS permettent aussi de modifier l’apparence des éléments de formulaires.

Comme on le ferait pour des paragraphes, il est possible d’utiliser les attributs font, background ou border pour eggayer les différents contrôles qu’on peut rencontrer dans un formulaire.

Prenons ce style:

.champTexte{
background-color : #FFC;
border : 1px solid #CFC;
font-family : 'Courier New', monospace;
}

Appliquons le à ce champ texte:

<input type="text" class="champTexte" id="champ1" value="Du texte" />

Nous obtenons ceci:

C’est possible, mais doit-on le faire? Tout dépend des cas, j’ai envie de dire. Lorsqu’un site possède une charte graphique très marquée, il peut être bon de renforcer (ou ne pas dénaturer) l’aspect graphique en stylisant les éléments de formulaires. Par contre, lorsqu’il s’agit d’un application web, je pense qu’il est préférable de conserver l’aspect défini par les systèmes d’exploitation. D’ailleurs, ceux-ci définissent parfois de manière très précise l’apparence des contrôles dans des guidelines très complètes (LunaXP Guidelines, Gnome HIG mais pas Aqua Guidelines où je n’ai pas trouvé grand chose).

En gros, il s’agit de savoir comment l’utilisateur se débrouille lorsqu’il passe de l’interface utilisateur de son système d’exploitation à l’interface du site web. Je pense que l’utilisateur moyen est capable de reprendre ses marques, à condition de ne pas trop le dérouter avec des styles trop exotiques. Logique, direz-vous. Mais l’ergonomie, c’est de la logique après tout, à condition de prendre le temps d’y réfléchir un peu. Qu’en pensez-vous?