Ils sont beaux, mes formulaires !

Styles CSS permettant de modifier l’aspect graphique des formulaires de SPIP afin de les insérer sans hiatus dans votre design.

Vous avez personnalisé la mise en page et la typographie de votre site, mais maintenant ce sont les formulaires SPIP qui jurent totalement sur le reste ! Pas de panique, là aussi les feuilles de style remédient au problème.

Différents formulaires sont utilisés dans le site public, pour le moteur de recherche interne, la rédaction des messages des forums, les inscriptions à l’espace privé, etc. Il en va pour ces formulaires SPIP comme pour le reste : leur aspect graphique peut être modifié via CSS afin de s’insérer sans hiatus dans votre design.

Pour tirer profit de cet article, mieux vaut connaître les balises HTML propres aux formulaires.

À chaque formulaire son style

Tous les formulaires SPIP utilisés dans le site public sont contenus dans une div dotée du même style, .formulaire_spip, qui permet d’appliquer facilement une modification devant concerner l’ensemble de ces formulaires.

Par exemple, pour mettre en gras tous les descriptifs des champs de saisie (<label>) de vos formulaires, vous stylerez ainsi :

.formulaire_spip label {
    font-weight: bold;
}

Depuis SPIP 1.9, chaque formulaire est, de plus, doté d’un style qui lui est propre. Celui-ci permet, inversemment, de modifier l’apparence de certains formulaires en particulier, sans interférer sur les autres.
Chacun de ces styles est nommé de même que la balise appelant le formulaire et son squelette. Par exemple, le fichier HTML du formulaire de recherche est formulaire_recherche.html ; celui-ci est inséré dans les squelettes grâce à la balise #FORMULAIRE_RECHERCHE ; et le style qui lui est associé est donc .formulaire_recherche.
Depuis SPIP 1.9.2, les squelettes des formulaires sont déplacés et ainsi renommés : dist/formulaires/recherche.html.

Styles des champs de saisie

Le style .forml est appliqué aux champs de saisie des formulaires. Il permet de définir la couleur du fond et la largeur des champs de saisie, mais aussi leur taille et police de caractère. Par exemple :

.forml {
    width: 99%;
    padding: 1px;
    border: 1px solid #666;
    font-family: Verdana;
    font-size: 11px;
}

Ce style est particulièrement utile pour homogénéiser l’ensemble des champs de saisie, quelques soient les balises qui le reçoivent, telles que <input> et <textarea>, toutes deux présentes dans le formulaire de forum.

Depuis SPIP 1.9, chaque champ de saisie est étiqueté d’un terme explicatif, enveloppé dans une balise HTML <label>. On modifiera l’apparence de ces étiquettes par cette définition de style : .formulaire_spip label.

Les styles CSS permettent non seulement de changer les couleurs et les polices de caractères, mais aussi de gérer le positionnement relatif des objets dans la page. Ils permettent même de définir précisément la disposition des éléments entre eux (par exemple : <input>, <textarea> et <label>), sans utiliser de <table>

pour la mise en page.

Des boutons à vos couleurs

Une nouvelle qui ravira les débutant-e-s en CSS : on peut changer la couleur des champs mais aussi des boutons des formulaires [1]. Le style .spip_bouton est celui utilisé pour les boutons des formulaires SPIP.

Par exemple, pour que les boutons aient un fond bleu clair, et une bordure suffisemment visible (épaisse, en relief et bleue foncée), modifiez la règle suivante dans votre feuille de style :

.spip_bouton {
    background-color: #b0d0FF;
    border: 2px outset #000060;
    color: black;
}

Depuis SPIP 1.7, SPIP 1.7.2, le formulaire de forum propose une barre de raccourcis typographiques. L’apparence de celle-ci est contrôlée par le style .spip_barre. Ainsi, pour modifier l’apparence des icônes qui la composent, et, par exemple, distinguer celles-ci au survol de la souris, vous définirez les styles pour .spip_barre a img puis .spip_barre a:hover img.

Organiser ces éléments de façon visiblement logique

Depuis SPIP 1.9, les différents éléments d’un formulaire sont plus rigoureusement regroupés en « blocs logiques » grâce aux balises HTML dédiées <fieldset> et <legend>. Leur apparence est donc contrôlée par .formulaire_spip fieldset et .formulaire_spip legend, tout simplement (ceci était autrefois réalisé avec .spip_encadrer). Utile pour encadrer chaque partie d’une bordure, et aérer vos formulaires en espaçant ces blocs les uns des autres, par exemple.

Quelques styles complémentaires permettent d’affiner encore la présentation de vos formulaires :

-  L’apparence des messages d’erreur et autres réponses renvoyées par les formulaires peut être personnalisée par le style .reponse_formulaire.

-  Certains formulaires permettent de prévisualiser les informations saisies avant de les envoyer. Depuis SPIP 1.9, l’apparence de cette prévisualisation est contrôlée par le style .previsu.

-  Enfin, ce dernier style n’est pas utilisé dans les formulaires, mais est lié au formulaire de recherche interne au site : .spip_surligne permet de mettre en évidence les termes recherchés dans les pages de résultats.

Notes

[1Notons cependant que certains navigateurs imposent leurs propres boutons stylisés et ne vous laisseront pas en changer l’aspect.

Cet article de Pompage.net introduit au style des formulaires : « CSS : on reprend tout à zéro ! (13ème épisode) ».
Lire aussi : Comment ne pas styler les éléments de formulaire ?

Auteur Antoine, tetue Publié le : Mis à jour : 02/07/23

Traductions : عربي, català, Deutsch, English, Español, français, italiano, Nederlands