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 :
- 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.
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?verbose=1&uri=http%3A%2F%2Fwww.css4design.com%2Fexemples%2Fdesign_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.
Le lien concernant 12 étapes pour simplifier et organiser les formulaires :
http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_intro.htm
semble en 404.
J’ai trouvé un accès via ce lien :
http://www.fredcavazza.net/mes-ressources/mes-tutoriels/
mais la page concernant les formulaires semble présenter un problème de…
mise en page 😉 (j’ai envoyé un mail au webmaster)
Concernant : ‘les pétouilles liées au script phpmyvisites’, le problème, s’il est lié à la balise noscript peut-être réglé en entourant par une balise et l’appel à l’image par une balise
<br/> voire, par ex car essayé,
.
repost de la fin car les balises ont été escamotée :
entourer nonscript de balises object
prévenir l’erreur sur l’appel à l’image par des balises p, br/ ou hx (h5 testé)
Ce qui donne (j’ai enlevé les délimiteur <>)
object
noscript
h5 type de balise imposée par la valisation
appel à phpmyvisites + logo
/h5
/noscript
/object
@nanart : Merci pour l’info concernant la disparition du lien vers les tuto de Fred Cavazza. C’est réparé.
Concernant les pétouilles liées à phpmv, je crois que je vais laisser les choses en l’état, ça ne me dérange pas tant que ça 😉
Merci encore et à bientôt
Bonsoir,
Je n’ai jamais de php mais j’ai fais du html/css et j’aimerai savoir ou je dois mettre l’adresse à laquelle sera envoyé le message. Le php n’est pas fourni dans le code mais pourtant le fichier téléchargé est .php devons nous écrire le php?
Cordialement
En général la page que l’on met dans action récupère les variables envoyées par le formulaire. Il peut s’agir de la même page. J’ai trouvé une page qui explique tout ça : http://www.vulgarisation-informatique.com/formulaires-php.php