Formulaire de tableau compliqué vs div

Question

J'ai regardé en ligne pour des exemples de mise en œuvre de la forme en utilisant DIVs et tout ce que je vois est assez simple formes d'une colonne. J'ai des formes assez compliquées, voici une photo d'un:

http://img835.imageshack.us/img835/8292/formn.jpg

Il est facile de le faire fonctionner avec table (ce que je fais), le seul problème que j'ai est que parfois je dois n'affiche pas certains des choix et déplace les valeurs d'une ligne pour éviter les vides.

J'ai commencé à créer des formulaires à l'aide de divs, mais ils se désintègrent lorsque je change la taille de la fenêtre du navigateur et qu'il n'est pas facile d'aligner les choses.

Ce sujet est utile: Is it bad design to use table tags when displaying forms in html? mais cela ne répond pas à certaines de mes préoccupations.

Que proposeriez-vous comme solution? Je peux supprimer/insérer dynamiquement des valeurs dans la table ou essayer de faire les DIVs.

Answer 1

Je voudrais aller la route div. Tant que vous faites attention à vos largeurs lorsque vous appliquez des flottants, il est en fait assez simple de faire fonctionner les mises en page dans différentes résolutions d'écran.

Voici quelques règles:

1. Définir une largeur maximale de votre forme ou l'élément d'emballage de votre formulaire. Si vous voulez faire flotter des éléments sur une rangée, assurez-vous que leur largeur ne dépasse pas cette largeur.
2. Si vous ajoutez des marges/marges horizontales à vos éléments flottants, n'oubliez pas que ceux-ci s'ajoutent à la largeur totale de l'élément.
3. Évitez de mélanger les largeurs de pourcentage avec le remplissage et les marges de pixels. Appliquez le pourcentage de largeur à un élément parent et le remplissage de pixels/marges à un élément enfant.
4. Utilisez des éléments de compensation entre vos rangées d'éléments pour que tout reste aligné.

En ce qui concerne le balisage, vous pouvez utiliser les éléments de formulaire ainsi que CSS pour créer une structure sémantique:

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset> 

Et le CSS:

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
} 

Vous pouvez see the result here.

Answer 2

S'il s'agit d'une table de largeur fixe, il est trivial de disposer des divs et des flottants. Réglez juste chaque largeur exactement ce que vous voulez. Pour une mise en page liquide et mise en page liquide est généralement très souhaitable, il est beaucoup plus difficile d'organiser une forme sans affichage de style de table, car float et position ne permettent pas facilement des calculs comme "cette cellule est la moitié de la largeur restante du parent, après que les étiquettes à largeur fixe ont été allouées ".

Ainsi, dans des cas comme celui-ci, qui inclut certainement le type de formulaire à deux colonnes que vous avez posté, les valeurs table-* CSS display sont votre seule possibilité. Si vous ne visez que IE8 et les autres navigateurs modernes, vous pouvez utiliser divs et définir display: table-row et al dans la feuille de style.Cependant, pour des raisons de compatibilité avec IE6-7 et d'autres navigateurs plus anciens/mobiles/de niche, vous devrez utiliser les éléments réels <table>/<tr>/<td>, car seuls les navigateurs modernes prennent en charge la table-CSS indépendamment des éléments de table.

Il n'y a pas de honte à cela. Un formulaire est en quelque sorte semi-tabulaire et il n'y a pas de désavantage pratique d'accessibilité, car le contenu de la page reste ordonné de manière appropriée.

Remarque: pour les formulaires de mise en page liquide, vous avez également la question des champs de saisie de dimensionnement pour correspondre à l'élément parent. input { width: 100%; } le fait presque, mais pas tout à fait, parce que le width n'inclut pas la bordure ou le remplissage que les entrées obtiennent par défaut. Vous pouvez utiliser CSS3 box-sizing et les versions spécifiques de votre navigateur pour contourner cela pour les navigateurs modernes, mais si vous voulez aussi aligner exactement sur le pixel sur IE6-7, vous devrez utiliser padding sur les éléments parents égal à la bordure/remplissage sur le champ de saisie enfant.

Answer 3

• General information est une sorte de liste, liste des clés> valeur pour être exact - <dl /> serait probablement la meilleure structure pour elle
• Issues values est une table,
• Ratings est une table,
• deux Redemption et Indicators sont des listes - listes à puces <ul />