Un formulaire sans tableaux

Je discutais à midi avec Olivier de Miasmatik.net de la difficulté de construire des formulaires sans passer par des tableaux dont l'utilisation n'est pas recommandée pour la mise en page.

Après quelques recherches, il en ressort le resultat suivant que je vous soumet tel quel et que vous pourrez bien entendu adapter et améliorer suivant vos besoins : il s'agit en fait d'utiliser les listes de définitions.

Me souvenant de l'article Les listes de définitions : mal utilisées ou mal comprises ? et notament du paragraphe « Donner à une liste de définitions l'apparence d'une table », je me suis penché sur le problème pour tenter de contruire un formulaire (simpliste dans mon cas) en adaptant la technique présentée dans cet article.

Le code source HTML est le suivant :

<dl class="form">
    <dt>Nom</dt>
    <dd><input type="text" name="nom" /></dd>
    <dt>Prénom</dt>
    <dd><input type="text" name="prenom" /></dd>
    <dt>Votre commentaire</dt>
    <dd><textarea name="commentaire"></textarea></dd>
</dl>

et le rendu intermédiaire sans style est celui-ci :

Formulaire + liste de définitions sans style

En s'aidant de l'article, le code CSS appliqué à notre liste de définition est le suivant :

dl.form dt {
    float:          left;
    margin:         5px;
    width:          150px;
    border-bottom:  1px dotted #ccc;
}
dl.form dd {
    margin:        5px;
    margin-left:    150px;
}
dl.form input {
    width:          250px;
}
dl.form textarea {
    width:          250px;
    height:         5em;
}

ce qui rend finalement la chose suivante sous Mozilla (le rendu est sensiblement le même sous IE5+/Win, je n'ai pas testé d'autres navigateurs, il se pourrait qu'il faille « caler » avec un ou deux hacks CSS) :

Formulaire + liste de définitions avec style

En conclusion, cette méthode semble satisfaisante puisque le style peut être appliqué à tous nos formulaires et la mise en forme reste propre et cohérente même en l'absence de style (navigateurs plus anciens ou « exotiques »).

Il va sans dire que l'exemple ci-dessus est tout à fait sommaire, il faudrait maintenant voir l'application de cette technique sur des formulaires plus compliqués; n'hésitez pas à faire par de vos remarques et expérimentations à ce niveau.

Posté le Tuesday 20 July 2004 dans Développement Web, Standards Web, XHTML/CSS.

Commentaires

Olivier a écrit le 22/07/2004 :
Yes it works!!
Enfin dans l'état ça marche sous IE. J'ai fais le test avec Firebird 0.7 et il gère une indentation pour chaque nouvelle élément, ce qui pose un petit problème de mise en page.

Pour rendre cette méthode opérationnelle avec les navigateurs à base de mozilla, il faut rajouter la propriété padding : 0; à la classe form.

Ce qui donne tout simplement :
form { margin : 0; padding : 0; }

Et là le résultat est identique.
Olivier a écrit le 26/07/2004 :
J'ai continué mes recherches sur le web et j'ai trouvé pixy.cz/[...]/css-fieldsetandlabels.html">ici une méthode alternative à celle proposée par pilgrim car se basant sur les champs fieldset et label
okworld a écrit le 30/07/2004 :
je prefere de loin la 2nd solution, je trouve que sémantiquement c plus correcte.
Nico a écrit le 05/08/2004 :
Très intéressant !
Nico a écrit le 05/08/2004 :
Au fait, tu m'avais demandé (il y a longtemps... désolé) le code de ma bidouille pour indenter du code source mieux que ne le fait nl2br(), le voici ici : dominique.hoffmann.free.fr/[...]/afficher_news.php?id_news=154

Ajouter un commentaire

Il n'est plus possible de réagir à cette entrée directement mais si vous pensez que votre intervention peut être intéressante, envoyez-moi votre commentaire, je l'ajouterai ici en votre nom.

pilgrim[.maleo.net]