Design de formulaire HTML avec CSS

Depuis longtemps, l’intégrateur web pressé d’aller manger, dresse la table pour mettre en forme ses formulaires. Et vas-y que je te mets du texte dans un td, un champ texte dans l’autre, et ce, jusqu’à la nausée. Désormais, plus d’excuses. Nous pouvons tous (oui, j’ai bien dit tous !) aligner des éléments de formulaires sans table. Mais pas sans les mains ni sans CSS.

Pour celà, nous allons utiliser la balise label suivie de la balise input appropriée. Nous transformerons la première en bloc display: block et nous la ferons flotter à gauche float: left. Nous lui donnerons enfin une largeur width: 40% et le tour est joué.

Nous allons ensuite mettre le tout dans une balise p à laquelle nous interdirons formellement d’avoir des amis à droite ou à gauche clear: both. Il ne manquerais plus que notre balise p se présente en 2007 ! Ce clear est très important car il permet que tout tienne en place, même si le texte du label est très long et prend plusieurs lignes comme avec les tableaux.

Note : pour mieux comprendre le rétablissement du flux avec un clear après un float, je vous invite à consulter les tutoriels Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et rétablir le flux après un float.

Pour les finitions, nous abuserons des margin et padding pour flatter l’oeil, et comme une image vaut mille mots, je vous ai préparé un exemple ici. Je vous invite à afficher le code source pour en savoir plus.

Design de formulaire CSS

Pour conclure, nous avons là un design de formulaire très souple, puisqu’en changeant quelques valeurs (à vous de chercher un peu), nous pouvons passer en taille fixe, tant pour l’ensemble de la page que pour la taille des label et des input. Je reste ouvert à toute suggestion pour toute amélioration.

Télécharger le fichier .html ou .php et les images

www.openweb.eu.org/articles/formulaire_accessible/
Qu’est-ce qu’un formulaire, quels en sont les balises à connaître et comment les organiser. Comme toujours sur openweb, un article clair et concis.
www.alistapart.com/articles/prettyaccessibleforms
cet article de alistapart nous montre que l’on peut considérer un formulaire comme une liste d’éléments que l’on pourra aisément styler.
www.fredcavazza.net/wp-content/uploads/doc/tutoriels/formulaire/SVF_intro.htm
12 étapes pour simplifier et organiser les formulaires, afin d’en faciliter la lecture et diminuer les sources d’erreurs.