La meilleure façon de mettre en page les formulaires HTML ?

Question

Je veux afficher un formulaire HTML contenant des champs de texte étiquetés, comme ceci :

      First Name:  \[\_\_\_\_\_\_\_\_\_\_\_\_\_\]
       Last Name:  \[\_\_\_\_\_\_\_\_\_\_\_\_\_\]
   Date of Birth:  \[\_\_\_\_\_\_\_\_\]

Mon approche évidente est d'utiliser un <TABLE> et placer simplement les étiquettes et les champs de texte dans ses cellules, mais existe-t-il une meilleure méthode, par exemple une approche basée sur les CSS ?

EDIT :

1. Je cherche un moyen de réduire la verbosité du fichier HTML.
2. Et oui, je cherche une taille automatique pour les étiquettes. Voir un question relative à l'emballage des étiquettes

Answer 1

Si vous avez besoin des étiquettes à gauche des champs comme ça, allez-y et utilisez un tableau. Non seulement les tableaux se dégradent bien sur les anciens navigateurs, mais ils dimensionnent automatiquement la colonne d'étiquettes en fonction du texte qu'elle contient (en supposant que vous utilisiez la fonction white-space: no-wrap sur les cellules contenant les étiquettes, et/ou - et c'est une véritable hérésie - le bon vieux nowrap de l'attribut th ), ils supportent bien le fait d'être fabriqués de manière assez étroite, et ils sont faciles. Faites de chaque cellule d'étiquette un en-tête et de chaque cellule de champ une cellule normale. Et c'est pénible, mais assurez-vous que les étiquettes sont vraiment label et établir des liens avec leurs champs, car l'accessibilité est importante, même si (peut-être surtout si) vous utilisez un tableau de manière non sémantique.

J'aimerais connaître les solutions CSS qui permettent de redimensionner automatiquement les colonnes d'étiquettes, de bien gérer l'étroitesse du site et qui n'impliquent pas de bidouillages pour gérer les incohérences entre les navigateurs. Je serais ravi de les voir. Mais à chaque fois que j'ai regardé (et cela fait plusieurs fois), il y avait toujours un vide. Une lacune qui doit être comblée, IMV, pour que nous puissions arrêter de faire ça sans porter de chemise à cheveux.

Pour tous ceux qui lisent et qui n'a pas besoin des étiquettes à gauche comme ça, vérifiez Réponse de jball pour une alternative esthétique et sémantique.

Answer 2

En termes de convivialité et si l'espace vertical n'est pas un facteur limitatif, une liste de champs avec l'étiquette au-dessus de chaque champ est la plus rapide à lire et à remplir, et peut être réalisée de manière esthétique. Pour plus d'informations, consultez les nombreuses études de convivialité disponibles sur le web, par ex. http://www.lukew.com/resources/articles/web_forms.html

Answer 3

J'aimerais utiliser des listes de définitions ( <dl> ), ils ont tendance à être sémantiquement corrects. Une étiquette est définie par une entrée utilisateur. Cela a du sens pour moi. <dl> exprime le contenu sémantique de manière plus précise qu'un tableau.

<dl>
    <dt><label for="name>Name</label></dt>
    <dd><input type="text" id="name" /></dd>

    <dt><label for="email>Email</label></dt>
    <dd><input type="text" id="email" /></dd>
</dl>

Voici un exemple

D'ailleurs, ils se dégradent gracieusement dans tous les navigateurs, même ceux à base de texte.

Answer 4

Je pense que c'est ce que je fais, mais il n'y a pas de taille automatique en fonction de la longueur du texte, mais c'est plus propre à mon avis.

<form>
  <label for="firstName">First Name</label>
  <input type="textfield" name="firstName" />

  <label for="lastName">Last Name</label>
  <input type="textfield" name="lastName" />
</form>

label {
  float:left;
  width:30px;
}

input {
  float:left;
  margin-left:30px;
}

Answer 5

L'article est un peu vieux, mais j'ai toujours trouvé que les conseils d'un spécialiste des listes étaient solides : (si vous voulez vraiment vous débarrasser de vos tables)

http://www.alistapart.com/articles/prettyaccessibleforms/