Details Ansicht und CSS-Konformität

Question

Ich tue mich immer noch schwer damit, keine Tabellen zu verwenden, um das Layout meiner Detailansicht in HTML zu erstellen. Ich möchte einige Beispiele ausprobieren und ein paar Meinungen einholen.

Was würden Sie gerne in der HTML für eine Detailansicht sehen? Welche hat die geringsten browserübergreifenden Hürden? Welche ist am kompatibelsten? Welche sieht besser aus, wenn ich eine rechtsbündige Spalte mit statischer Breite habe?

Mit Detailansicht meine ich etwas ähnliches wie das folgende Bild.

Tabelle

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

Feldsatz

<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

Diese Ansätze schließen sich nicht gegenseitig aus, ich persönlich würde sie ein wenig miteinander vermischen:

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

Obwohl, um eine rechts ausgerichtete Beschriftung zu erhalten (etwas, das ich persönlich vermeiden würde, weil es schwieriger ist, visuell zu scannen), müssen Sie ein zusätzliches Element um den Text herum haben, das nicht um die Eingabe herum ist, also würde ich mich für

<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

Ich nehme das zurück, denn für einfache Textfeld-Eingaben finde ich, dass die Fieldset-Option gut funktioniert.

Allerdings werde ich in der Regel mehrere Steuerelemente in einer einzigen "Zeile" haben, daher gehe ich mit dem div-basierten Layout, so kann ich Eingaben, Validatoren und alle in einem einzigen Element setzen.

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 />

Natürlich können Sie dann ein div hinzufügen oder das Formular verwenden, um eine Hintergrundfarbe für Ihr gesamtes Formular usw. zu erhalten.

Answer 4

Ich bevorzuge das Fieldset mit Divs. Die Beschriftungs-Divs sind float:left; width:20em und die Inhalts-Divs haben einfach einen festen linken Rand von 21em oder 22em zum Beispiel. Aber Sie müssen daran denken, ein klares Div einzuschließen, damit das funktioniert:

<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

Ich finde, dass Formulare eines der schwierigsten Dinge sind, mit denen man in CSS umgehen muss, denn wenn man eine strenge Kontrolle haben möchte, muss man oft eine Menge CSS hinzufügen, was bei HTML der alten Schule nicht der Fall wäre. Wenn Sie jedoch bereit sind, eine einheitliche natürliche Behandlung zu akzeptieren, dann wäre der sauberste Weg, den Inhalt und die Darstellung zu trennen:

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>