Ressources CSS pour vos formulaires

Formulaire Ressources CSS

Les formulaires font parti des éléments quasi incontournables sur un site web. Pas toujours évidents à mettre en forme lorsqu’on débute en CSS, longs et redondants lorsqu’on est passé pro. Dans les deux cas, une bonne dose de ressources fait toujours du bien !

On débute ?

Lorsqu’on débute en HTML / CSS, rien de tel pour apprendre que d’examiner un formulaire très simple et basique pour comprendre la sémantique de base. Premier exercice avec ce formulaire complet mais simplement stylé.

CSS Ressources formulaires

Pour ensuite comprendre le HTML rien de tel qu’avoir un exemple clair du markup :

CSS Ressources formulaires

CSS Ressources formulaires

Un site vieux certes mais avec des exemples de bases qui peuvent aider. Différents types de formulaires sont présentés (verticaux, horizontaux…) :

CSS Ressources formulaires

CSS Ressources formulaires

Côté ergonomie, A List Apart donne également de bons conseils :

CSS Ressources formulaires

C’est du gâteau !

Lorsqu’on maîtrise l’art des formulaires sur le bout des doigts et pour gagner du temps, quoi de mieux que de se baser sur des templates très bien préparés comme sur le site Indeziner :

CSS Ressources formulaires

Pour gagner un maximum de temps, les générateurs font parfois très bien l’affaire :
CSS Ressources formulaires

CSS Ressources formulaires

Les meilleures pratiques pour créer un formulaire d’inscription expliquées sur SpeckyBoy :

CSS Ressources formulaires

Pour aller plus loin avec HTML 5 / CSS 3 et le mobile

Beaucoup de documentation et des références de qualité :

CSS Ressources formulaires

Des conseils et astuces pour les formulaires sur mobiles :
CSS Ressources formulaires

Comme d’habitude n’hésitez à partager vos bonnes trouvailles dans les commentaires !

Vous aimerez aussi :

Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

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