Détails Voir et Conformité CSS

Question

J'ai toujours du mal à ne pas utiliser les tableaux pour faire ma présentation détaillée en HTML. Je veux faire des échantillons par des gens et avoir des opinions.

Qu'est-ce que vous préférez voir dans le code HTML pour une vue Détails? Lequel a le moins d'obstacles cross browser? Lequel est le plus conforme? Lequel a l'air meilleur si j'ai une colonne d'étiquette de largeur statique qui est alignée à droite?

Par vue détaillée, je veux dire quelque chose de similaire à l'image suivante. alt text http://img261.imageshack.us/img261/5203/crudrl8.png

Tableau

<table> 
<tr> 
<td><label /></td> 
<td><input type="textbox" /></td> 
</tr> 
<tr> 
<td><label /></td> 
<td><input type="textbox" /></td> 
</tr> 
</table> 

Fieldset

<fieldset> 
<label /><input type="textbox" /><br /> 
<label /><input type="textbox" /><br /> 
</fieldset> 

Divs

<div class="clearFix"> 
<div class="label"><label /></div> 
<div class="control"><input type="textbox" /></div> 
</div> 


<div class="clearFix"> 
<div class="label"><label /></div> 
<div class="control"><input type="textbox" /></div> 
</div> 

Liste

<ul> 
<li><label /><input type="textbox" /></li> 
<li><label /><input type="textbox" /></li> 
</ul> 

Answer 1

Ces approches ne sont pas mutuellement exclusives, personnellement je les mélanger un peu:

<fieldset> 
    <label for="name">XXX <input type="text" id="name"/></label> 
    <label for="email">XXX <input type="text" id="email"/></label> 
</fieldset> 

Bien que pour obtenir une étiquette aligné à droite (quelque chose j'éviter personnellement, car il est plus difficile à analyser visuellement) vous aurez besoin d'avoir un élément supplémentaire autour du texte qui ne sont pas autour de l'entrée, donc j'iriez pour

<fieldset> 
    <div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div> 
    <div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div> 
</fieldset> 

Answer 2

En fait, je le reprends pour les entrées de simple boîte de texte, je trouve que l'option Fieldset fonctionne bien.

Cependant, généralement, je vais avoir plusieurs contrôles dans une seule "ligne", donc je vais avec la disposition div basée, de cette façon je peux mettre les entrées, les validateurs et tous dans un seul élément.

Answer 3

CSS:

label{ 
    float:left; 
    text-align:right; 
    width:115px; 
    margin-right:5px; 
} 
input{ 
    margin-bottom:5px; 
} 

HTML:

<label for="username">UserName:</label><input type="text" id="username" /><br /> 
<label for="username">UserName:</label><input type="text" id="username" /><br /> 

vous pouvez alors évidemment ajouter un div ou utiliser le formulaire autour d'elle pour obtenir une couleur de fond pour votre forme entière, etc.

Answer 4

Je préfère le fieldset contenant divs. Les divs label sont float: left; width: 20em et les divs content ont juste une marge gauche fixe de 21em ou 22em par exemple. Mais vous devez vous rappeler d'inclure un div clair que pour travailler:

<fieldset> 
    <div class="labels"><label for="name">Name</label></div> 
    <div class="data"><input ....</div> 
    <div style="clear:both"/> 
// repeat for next fields 
</fieldset> 

Answer 5

Je trouve que les formes sont l'une des chose la plus difficile à traiter dans css parce que si vous êtes désireux de contrôle serré, il y a souvent beaucoup de CSS pour ajouter cette vieille école HTML prendrait soin de vous. Toutefois, si vous êtes prêt à accepter un traitement naturel uniforme, la plus propre moyen de séparer le contenu et la présentation serait:

form { margin: 0; padding: 0; } 
fieldset { whatever treatment you want } 
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ } 
#details label { float: left; width: 190px; text-align: right; } 
#details input { margin-left: 200px; } 

<form> 
    <fieldset id="details"> 
    <div id="item1div"> 
     <label for="item1">item1 label</label> 
     <input type="" id="item1" /> 
    </div> 
    <div id="item1div"> 
     <label for="item1">item1 label</label> 
     <input type="" id="item1" /> 
    </div> 
    </fieldset> 
</form> 

Answer 6

Vous pouvez utiliser des tables au format forme sous forme de tableau, mais utiliser les CSS pour ajouter des styles aux formes.Les puristes de CSS diront probablement que vous ne devriez pas, mais la réalité est que de nombreux navigateurs rendent souvent les formulaires CSS différemment et peuvent causer des problèmes d'accessibilité. Un formulaire basé sur une table est beaucoup plus cohérent entre les navigateurs et beaucoup plus accessible.