web-dev-qa-db-fra.com

Le meilleur moyen de mettre en page des formulaires HTML?

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

 Prénom: [_____________] 
 Nom de famille: [_____________] 
 Date de naissance: [________]

Mon approche évidente consiste à utiliser un <TABLE> et à simplement placer les étiquettes et les champs de texte dans ses cellules, mais existe-t-il un meilleur moyen, par exemple. une approche basée sur CSS?

MODIFIER:

  1. Je cherche un moyen de réduire la verbosité dans le fichier HTML.
  2. Et oui, je recherche l'auto-dimensionnement des étiquettes. Voir une question connexe sur l'emballage des étiquettes
htmlcssformslayouthtml-form
32
Tony the Pony

Si vous avez besoin des libellés situés à gauche des champs, utilisez un tableau. Non seulement les tables se dégradent bien sur les anciens navigateurs, mais elles redimensionnent automatiquement la colonne d'étiquettes en fonction du texte qu'elles contiennent (en supposant que vous utilisez white-space: no-wrap sur les cellules contenant les étiquettes et/ou - et c'est une véritable hérésie - le fidèle vieux nowrap attribut sur la balise th), ils gèrent assez bien le rendu et ils sont faciles. Faites de chaque cellule d'étiquette un en-tête et chaque cellule de champ d'une cellule normale. Et c'est un problème, mais assurez-vous que les étiquettes sont vraiment des variables label et un lien vers leurs champs, car l'accessibilité est importante, même si (surtout si vous utilisez) une table de manière non sémantique.

J'adorerais entendre parler de solutions CSS qui redimensionnent automatiquement les colonnes d'étiquettes, gèrent le fait d'être étroit et ne nécessitent pas 18 piratages pour traiter les incohérences entre les navigateurs. Je serais ravi de les voir. Mais chaque fois que j’ai regardé (et c’est plusieurs), c’est toujours un écart. Un vide à combler, IMV, pour que nous puissions cesser de le faire sans porter de chemise à cheveux.

Pour tous ceux qui lisent n'a pas besoin des étiquettes à gauche, regardez la réponse de jball pour une alternative sémantique de belle apparence.

36
T.J. Crowder

En termes de convivialité et si l’espace vertical n’est pas un facteur limitant, une liste de champs avec l’étiquette au-dessus de chaque champ est la plus rapide à lire et à compléter et peut être réalisée de manière esthétique. Voir de nombreuses études d'utilisabilité sur le Web pour plus d'informations, par exemple. http://www.lukew.com/resources/articles/web_forms.html

19
jball

J'aimerais utiliser les listes de définitions (<dl>), elles tendent à être sémantiquement correctes. Une étiquette est définie par une entrée utilisateur. Cela a du sens pour moi. <dl> exprime le contenu sémantique plus précisément qu'une table.

<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

À propos, ils se dégradent gracieusement dans tous les navigateurs, même à base de texte.

14
Boris Guéry

Je pense que quelque chose comme ceci est ce que je fais mais aussi ne réduira pas automatiquement la taille 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;
}
5
Catfish

L'article est un peu vieux, mais j'ai toujours trouvé le conseil d'une liste à part solide: (si vous voulez vous débarrasser de vos tables)

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

4
quoo

Affichage de la table CSS

À partir d'IE8 + vous pouvez utiliser l'affichage de la table CSS pour cela:

enter image description here

<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">

<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>

<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>

<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>

<div>
<label></label>
<input type="submit" value="Send"/>
</div>

</form>
</body>
</html>
3
Jonas

Utilisez un framework CSS tel que Blueprint et utilisez-le pour styliser les formulaires.

Une autre astuce serait de créer des "colonnes" virtuelles avec css et de les faire flotter les unes à côté des autres. Étiquettes dans une colonne et entrées dans une autre. Placez cela (les deux colonnes) dans un div de largeur suffisante et faites-les flotter de la même manière que vous souhaitez aligner.

Voici un code (parce que je crée un formulaire) que will fonctionnera pour les formulaires de base. La seule contrainte est la grande marge droite sur les entrées.

form input, form select
{
    float: right;
    margin-right: 650px;
}
form label
{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
form .nofloat
{
    float: none;
    margin: 0;
}
form br
{
    clear: both;
}

Et mise en page comme si

<input type="text" id="name" />
<label for="name">Name</label>
<br />

En plus de ce petit code étroitement écrit, il existe un tout l'article relatif à la création de formulaires sans tableau en CSS.

2
Josh K

En règle générale, j'ai constaté qu'il y a au moins quelques problèmes lorsque vous n'utilisez pas de tables pour les formulaires. Les problèmes généraux que je n'ai pas pu résoudre:

  • La couleur de fond pour les champs/entrées n'est pas vraiment possible sans un faux fond
  • Auto-dimensionnement des colonnes, mais je pense que c'est OK
  • Survolez les champs avec CSS, vous pouvez utiliser JS mais les tables peuvent le faire avec du CSS pur

Il se peut que je manque quelques détails, mais le balisage le plus flexible si vous utilisez CSS est le suivant:

<div class='form-field'>
   <label>Name</label>
   <input />
</div>

Vous avez des problèmes si vous voulez plusieurs champs par section de libellé. Vous devez donc introduire un autre div pour contenir les entrées (pour permettre au libellé de flotter à gauche, etc.):

<div class='form-field'>
   <label>Name</label>

   <div class='form-inputs'>
      <input />
      <input />
   </div>
</div>

Avec le balisage ci-dessus, vous pouvez obtenir des formulaires très flexibles. Je ne publierai pas de CSS car il ressemble beaucoup à une disposition à 2 colonnes.

J'ai encore besoin de m'asseoir et d'essayer de déterminer si les formes CSS pures sont viables pour toutes les occasions, mais c'est très peu probable!

Les formulaires sont la pire chose à styler en utilisant CSS. Les seuls problèmes majeurs rencontrés avec Cross Browser concernent le style des éléments FieldSet et Legend. Pas de vrais hacks, mais ils prennent un peu de travail pour bien paraître.

0
Mig

Un problème avec les tables est le espace bug . Lorsque vous n'utilisez pas de tables, vous pouvez écrire votre étiquette et la saisir comme ceci:

<label for="foo">Blah <input id="foo" type="text"/></label>

qui encapsule correctement l'entrée et l'étiquette.

Dans un tableau, en revanche, vous obtenez ceux séparés:

<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>

Cela signifie que la zone située entre </ label> et <input /> ne répond pas aux clics de souris.

Ce n’est pas trop mal avec les champs simples, c’est vraiment ennuyant avec les boutons radio et les cases à cocher (ou peut-être que je suis juste super difficile).

Maintenant, pour répondre à votre question: je ne pense pas qu’il existe un bon moyen de formater une colonne en CSS (à moins que la largeur de la colonne soit connue - vous pouvez obtenir cet exploit avec JavaScript ...). Donc, T.J. Crowder a certainement une excellente réponse.

Cependant, il y a un argument pour CSS (et les largeurs forcées) car dans un cas, j'ai créé un très grand formulaire qui couvrait tout l'écran. Tous les champs apparaissent sur un seul écran (selon les souhaits du client) et le CMS n’a pas généré de tableau. Mais même si, une table aurait été un cauchemar simplement parce que tous les champs étaient pour beaucoup placés dans des colonnes non alignées. Ce serait assez difficile avec un tableau (beaucoup de rangées utilisant le tableau comme une grille qui serait un tableau pour la mise en page!).

Mettre à jour:

Comme indiqué ci-dessous, singe31 indique que <input/> ne peut pas être défini dans la balise <label>. C'est faux. La DTD HTML 4.01 est facile à lire et nous constatons que:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Donc, en d'autres termes, un <input/> peut apparaître dans une balise <label>. C'est parfaitement légal.

HTML 5 montre clairement que ceci est légal dans la documentation sur w3c ici:

http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element

Faites défiler un peu jusqu'à "Exemple de code" et vous verrez:

Exemple de code

Par exemple, sur les plates-formes où cliquer ou appuyer sur une étiquette de case à cocher coche la case, cliquer ou appuyer sur l'étiquette dans l'extrait suivant peut obliger l'agent utilisateur à exécuter des étapes d'activation de clic synthétique sur l'élément d'entrée, comme si l'élément lui-même avait été déclenché par l'utilisateur:

<label><input type=checkbox name=lost> Lost</label>

Sur d'autres plates-formes, le comportement peut être simplement de concentrer le contrôle ou de ne rien faire.

0
Alexis Wilke