CSS & Webdesign » label http://css.4design.tl Le blog de l'intégrateur web Thu, 24 May 2012 16:31:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 10 bonnes pratiques pour des formulaires HTML efficaces http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces#comments Thu, 02 Jul 2009 14:40:31 +0000 Bruno Bichet http://www.css4design.com/?p=2866 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.

  1. Aller droit au but (Path to completion),
  2. Alignement des labels (Label alignment),
  3. Aide et astuces (Help & tips),
  4. Validation (Inline validation),
  5. Actions primaires et secondaires (Primary & Secondary actions),
  6. Actions en cours (Actions in progress),
  7. Erreurs (Errors),
  8. Input inutiles (Unnecessary inputs),
  9. Organisation du formulaire (Form organization),
  10. 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

flattr this!

]]> http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces/feed 2 Aligner le contenu d'un champ input avec le label associé http://css.4design.tl/aligner-le-contenu-dun-champs-input-avec-le-label-associe http://css.4design.tl/aligner-le-contenu-dun-champs-input-avec-le-label-associe#comments Tue, 14 Oct 2008 18:36:19 +0000 Bruno Bichet http://www.css4design.com/?p=2094 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

flattr this!

]]> http://css.4design.tl/aligner-le-contenu-dun-champs-input-avec-le-label-associe/feed 16