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.
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
La conception de formulaires xhtml et css vous intéresse ? Lisez aussi :
- http://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.
- http://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.
- http://www.fredcavazza.net/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.
9 participations à l'article
Très sympo j’ai pris le temp de tester et le tout est simple à mettre en place…. La preuve je n’ai pas rencontré de problème !!!! Tiens cela vient peut être de moi, mais il me semble déjà avoir vu le formulaire d’exemple quelque part :p !!!!
Toutafé, il n’y a aucune raison pour que la main gauche ignore ce que fait la main droite. Et d’ici lundi, si tu marches sur une tartine, rappelle-toi que ça porte bonheur ;)
Et aussi Fred: http://www.fredcavazza.net/doc/t...
@katsoura -> Merci pour le lien intéressant. Du coup, je l’ai intégré dans le billet ;)
Euh… Moi, j’ai pas tout compris. Mais j’y travail. ^^
Kablumy > le travail paie toujours ;) Si tu as besoin d’un coup de main supplémentaire, n’hésites pas à demander en précisant les points qui te posent problème
http://validator.w3.org/check?.....n_forms%2F
@mouton > oki, merci pour le lien ;) j’ai passé l’aspirateur et il ne reste que les pétouilles liées aux script de statistique qui disparaitront quand je me déciderais à virer phpmyvisites ;)
Quand même : les attributs rows et cols obligatoires pour un textarea, c’est balot… d’autant plus que j’ai mis un rows=”" et un cols=”" (vides donc) qui semble rassasier le validateur, mais qui ne servent vraiment à rien…
M’enfin.
Hello! I think this try.