css 4 design » input

10 bonnes pratiques pour des formulaires HTML efficaces

Bruno Bichet — Thu, 02 Jul 2009 14:40:31 +0000

Les formulaires sont indispensables pour recueillir les informations issues des utilisateurs. Leur mise en place nécessite quelques précautions que nous rappelle bbxdesign avec les 10 bonnes pratiques pour réaliser un formulaire d’après la conférence de Luke Wrobleski.

Aller droit au but (Path to completion),
Alignement des labels (Label alignment),
Aide et astuces (Help & tips),
Validation (Inline validation),
Actions primaires et secondaires (Primary & Secondary actions),
Actions en cours (Actions in progress),
Erreurs (Errors),
Input inutiles (Unnecessary inputs),
Organisation du formulaire (Form organization),
Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

JotForm — création de formulaires en ligne,
webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Articles sur le même sujet

Styler vos champs de formulaires de recherche avec CSS

Bruno Bichet — Sun, 07 Dec 2008 21:38:31 +0000

Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ input type=text blanc avec contour.

L’auteur utilise un button à la place du input type= »submit » pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ input et le button. Ce qui permet de gérer facilement les différents état :focus ou :hover avec background-position.

PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.

Articles sur le même sujet

Aligner le contenu d'un champ input avec le label associé

Bruno Bichet — Tue, 14 Oct 2008 18:36:19 +0000

Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité.

Pour un champ input de 20px de haut, on aura ainsi les valeurs :

input {
    height: 13px;
    padding: 3px 0 4px 0;
}

Pour une hauteur identique à :

input {
    height: 20px;
}

And the cat’s in the bag!

Articles sur le même sujet

Personnalisez vos formulaires avec CSS et Javascript

Bruno Bichet — Mon, 13 Oct 2008 05:29:26 +0000

Grâce au tutoriel très complet de Josselin Willette sur la personnalisation des formulaires paru sur Developpez, vous saurez comment mettre les éléments de formulaire au garde-à-vous : input text, password, radio, checkbox, button, submit, reset, textarea, select… Et oui, vous avez bien lu : vous pourrez même changer ce satané texte Parcourir… propre aux input de type file ! Attention toutefois à ne pas trop pertuber l’utilisateur car en matière de formulaire, le moche c’est bien…