Des formulaires bien structurés, faciles à styler

8 mai 2008,
par Romy Têtue

Mots-clefs associés à cet article :

Voici quelques règles d’écriture que j’ai progressivement adoptées pour structurer correctement les formulaires en HTML tout en en simplifiant la mise en forme en CSS. J’obtiens ainsi des formulaires à la fois souples et robustes, qui s’adaptent à toutes les situations.

Structure générale des formulaires

Chaque formulaire est englobé dans une <div> contenant le <form> et, s’il y a lieu, les éléments satellites en rapport (ancre, titre, paragraphe explicatif), qui ne serait pas inclus dans <form> ;
- cette <div> porte le sélecteur générique « .formulaire » (ou « .form »), qui permet d’homogénéiser d’un coup tous les formulaires du site ;
- celui-ci est complété d’un sélecteur par type de formulaire, qui permet de cibler distinctement, par exemple : « .formulaire_abonnement » ;
- et d’un identifiant unique, par exemple « #formulaire_abonnement-523 » ;
Chaque formulaire est subdivisé en blocs logiques grâce aux éléments HTML <fieldset> et <legend> :
- chaque fieldset est lui-même subdivisé en lignes ; c’est une simple liste <ul><li>, éventuellement une liste ordonnée <ol><li> s’il s’agit d’étapes obligatoires successives ;
  - chaque étape de saisie est isolée dans une ligne (<li>) ;
  - chaque ligne porte un attribut class désignant l’étape qui lui correspond : « .editer_surtitre », « .date_de_naissance », etc. Ces classes sont transversales : elles peuvent être ré-employées à l’identique d’un formulaire à l’autre, car on a par exemple besoin de la date de naissance dans plusieurs formulaires différents du site ;
  - chaque ligne contient donc (au moins) un champ de saisie et son intitulé (<label>) ;
- les boutons sont hors des <fieldset> : ils leurs succèdent.

Élément par élément

Chaque champ de saisie (textarea et/ou input et/ou select) est précédé d’un intitulé explicatif dans une balise <label> ;
Chaque label porte un attribut for identique au name et à l’id du champ auquel il se rapporte ;
Les inputs portent systématiquement des classes homonymes au type : .text, .submit, .checkbox, etc. afin de pouvoir les cibler, car Internet Explorer ne comprend pas le CSS input[type=text].

Exemple :

<label for="nom">Nom</label>
<input type="text" class="text" name="nom" id="nom" value="" />

Cas particuliers des champs obligatoires et des erreurs

Les champs obligatoires sont explicitement signalés comme tels :
- par un message textuel (et non pas seulement visuel) placé dans le label, dans une balise <em> ;
- une class « .obligatoire » est placée sur le <li> pour appliquer, si besoin, une mise en forme visuellement différente ;
Les erreurs sont explicitement signalées :
- une class « .erreur » est alors placée sur le <li> pour signaler visuellement les étapes en erreur ;
- chaque erreur bénéficie d’un message explicatif, portant la class « .erreur_message ».

Exemple :

<li class="saisir_courriel obligatoire">
        <label for="courriel">Courriel<em> (Obligatoire)</em></label>
        <input type="text" class="text" name="courriel" id="courriel" value="adresse@email.fr" />
</li>

Exemple de formulaire ainsi structuré

Affichez le code source du fichier joint ci-après.

Vos commentaires

1. Le 9 mai 2008 à 10:25, par loic m. En réponse à : Des formulaires bien structures

Pourquoi encadrer ton formulaire dans un bloc <div /> ?
On a deja un bloc avec <form /> non ?

En revanche, l’utilisation des <li /> permet d’eviter l’utilisation de <br /> a chaque fin de ligne mais egalement de bien structurer, via CSS, l’ensemble des champs.

On voit bien par ton exemple l’interet d’utiliser les fieldset :)

Une bonne source d’inspiration au final.
Merci pour ce billet.
2. Le 9 mai 2008 à 11:52, par Romy Têtue En réponse à : Des formulaires bien structurés, faciles à styler

Le bloc div permet d’englober proprement quelques bricoles parfois nécessaires autour d’un formulaire, comme par exemple une ancre, un titre et quelques paragraphes de mode d’emploi.

Oui les li permettent de coder plus proprement, tout en se gardant suffisamment de liberté de mise en forme. D’expérience, cela me semble finalement plus adapté et plus maniable que des p ou div.
3. Le 13 mai 2008 à 10:20, par RastaPopoulos En réponse à : Des formulaires bien structurés, faciles à styler

J’adooooore.

Mais pourquoi diable créer des classes compliquées comme « formulaire » PLUS « formulaire_abonnement » PLUS « formulaire_abonnement_245 ».
Car le grand intérêt des classes CSS c’est quand même d’être superposables. Donc pouvoir faire : div.formulaire.abonnement.id253 par exemple.

Ce qui allège considérablement la lisibilité et la maintenance.
Non ?
4. Le 13 mai 2008 à 10:52, par Romy Têtue En réponse à : Des formulaires bien structurés, faciles à styler

Oui, RastaPopoulos, des class comme les mots d’une phrase, c’est ce que je pratiquais auparavant. C’est très lisible... dans la page HTML.

Par contre, ça n’est plus du tout explicite, dans la feuille de style, parce qu’on n’y ré-écrit pas nécessairement le chemin. On gagne donc en lisibilité à avoir des noms de class qui restent explicites en solo.
5. Le 16 mai 2008 à 15:45, par Stéphane Deschamps En réponse à : Des formulaires bien structurés, faciles à styler

De plus, de mémoire je crois qu’IE (6 ?) n’aime pas les noms de classes en cascade et ne prend en compte que la première.

Autrement dit div.formulaire.abonnement.id253 sera compris div.formulaire.

(attention, j’ai bien dit « de mémoire »)
6. Le 25 juin 2008 à 14:53, par marcimat En réponse à : Des formulaires bien structurés, faciles à styler

Effectivement, IE6 ne prend en compte que la dernière classe css, c’est à dire que dans l’exemple div.formulaire.abonnement.id253, IE6 comprendra div.id253.

MM.
7. Le 23 septembre 2008 à 11:20, par 20cent En réponse à : Des formulaires bien structurés, faciles à styler

Bonjour,

Je ne comprends pas trop pourquoi les li sont plus adaptés et maniables que des p ? Tu peux nous en dire plus ?
8. Le 20 novembre 2008 à 21:58, par Romy Têtue En réponse à : Des formulaires bien structurés, faciles à styler

En réalité, je ne saurais recommander précisément l’un plus que l’autre. Je préfère simplement réserver les p aux contenus textuels et les li me semblent mieux correspondre aux formulaires que j’aborde comme une liste de couples label+champs...
9. Le 5 août 2010 à 14:52, par speedlab En réponse à : Des formulaires bien structurés, faciles à styler

@20cent : on peut considérer, sémantiquement, que les données qui se suivent dans un formulaire sont une liste de champs à remplir, auquel cas l’utilisation d’une... liste, ordonnée ou non, est plus judicieuse qu’une suite de paragraphes.