Explorations de formulaires CSS Ou comment s’arracher les cheveux...

, par Matthieu Marcillaud

La version SVN de SPIP essaie de trouver une structure HTML/CSS correcte pour les formulaires. Loin d’être simple, voici des commentaires sur une évolution du code proposé par Tetue ici et

Notre référente CSS, Tetue, propose de réaliser des formulaires en utilisant des listes ul / li pour assurer leur structure, associés à des labels ayant un display inline-block.

L’affichage se présente bien quelque soit le navigateur, mais nous sommes vite confrontés à un problème...

Dès que l’on veut ajouter plus d’un élément entre 2 labels, le second élément est alors positionné sous le label, aligné à gauche, et non sous le premier élément avec le même alignement. Ainsi, s’il y a une erreur sur un des champs dans l’exemple, l’erreur sera affichée décalée sur la gauche par rapport à l’input qu’elle représente.

Pour combler cela, il est possible de déclarer le label en float:left ; et d’attribuer une marge identique à tous les éléments contenus entre 2 labels, ce qui est vite rébarbatif.

Voici une autre solution utilisant une marge négative.

Formulaire reprisé

Pour positionner l’ensemble, nous allons jouer avec des marges négatives. Schématisé, cela donne :

1) on applique un padding gauche au LI supérieur à la taille du label (ex:120px)

2) on demande au label d’être flottant et décalé sur la gauche (via un margin négatif)

3) lorsqu’un fieldset suit un li, on le décale aussi vers la gauche
(seul IE n’en tient pas compte) pour que le fieldset prenne toute la
largeur aussi

Coup de pouce

Pour me maintenir en éveil et en pleine forme physique et mentale, vous pouvez me faire le cadeau d'un jus de fruit pressé.

En plus de m'hydrater, de m'offrir une alimentation saine crudivore et frugivore, cela peut aussi me motiver à produire d'autres documentations ou peut-être à prendre des vacances ! :)

Vous pouvez également me « Flattrer » si vous utilisez le service en ligne très malin Flattr de microdonations qui permet d'allouer un budget mensuel à des créateurs de contenu. Votre budget est partagé chaque mois entre toutes les personnes que vous avez flattées ce mois là.