Details View and CSS Compliance

Answer 1

Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.

However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.

Answer 2

Those approaches aren't mutually exclusive, personally I'd mix them up a bit:

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

Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for

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

Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.

Answer 4

I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:

<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

I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:

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>

Cheers,
Steve

Answer 6

You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.