Design de formulaire HTML avec CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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/files/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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “Design de formulaire HTML avec CSS”

  1. Cap° dit :

    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 !!!!

  2. br1o dit :

    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 ;)

  3. @katsoura -> Merci pour le lien intéressant. Du coup, je l’ai intégré dans le billet ;)

  4. Kablumy dit :

    Euh… Moi, j’ai pas tout compris. Mais j’y travail. ^^

  5. br1o dit :

    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

  6. Bruno Bichet dit :

    @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.

  7. Floroskop dit :

    Hello! I think this try.

  8. nanart dit :

    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é,

    .

  9. nanart dit :

    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

  10. Bruno Bichet dit :

    @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

  11. lebabouin dit :

    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

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site