Standard et les meilleures pratiques dans le traitement des colonnes multiples / complexes avec les formes

Question

J'ai veux savoir quelle est la meilleure pratique ou une approche dans le traitement des colonnes multiples et complexes avec une forme à l'intérieur.

est ici un exemple de la forme que je traite

Comment écrire correctement une balise HTML pour cela? Si j'enveloppe chaque élément de forme avec une « DIV » pour chaque colonne, il prendrait beaucoup « » et DIVs styles; et la largeur de chaque colonne qui ne répète pas.

Alors ce que je l'ai dit, je mets tout élément de forme dans le tableau. Et je pense que ce n'est pas la manière standard de le faire.

Si votre dans mes chaussures,

Comment réagiriez-vous les colonnes de largeur non-répétition?

Answer 1

Il n'y a pas de norme pour les formes complexes, mais il y a beaucoup de messages de blog prétendant avoir trouvé la meilleure façon d'aborder ce problème. La plupart d'entre eux sont bien pensés, mais en fin de compte, vous devez choisir celui que vous êtes plus à l'aise. J'ai quelques suggestions que:

• Consultez le changement de service postal américain de formulaire d'adresse. Il est fait étonnamment bien

• Si vous avez beaucoup de formes, en utilisant un système de grille comme 960.gs, blueprint.css ou grilles YUI (frisson) est un moyen facile de mettre en œuvre une forme. Cependant systèmes de grille sont certainement considérés comme ballonnement si c'est le seul endroit où vous allez les utiliser.

  • Effectuez une recherche pour « formes » tableless sur Google. Vous verrez beaucoup de différentes implémentations. Choisissez celui que vous aimez.

Answer 2

Je serais probablement mettre chaque élément de formulaire dans un élément de liste dans une liste non ordonnée (je pense que sémantiquement, il est une liste d'éléments d'entrée qui doivent être remplis.)

Je puis ajouter des classes à eux pour le positionnement et la largeur etc - les colonnades devraient donner une largeur et flottais gauche ...

:

<ul>
   <li class="iName"><label for="name">Full name:</label><input name="name"/></li>
   <li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
   etc etc...
</ul>

Je crois que ce serait sémantiquement correct et la manière la plus accessible pour le faire.