Forms: Does your css accomodate your markup or vice versa?

Question

Regarding html forms, a very common markup pattern is:

<form ...>
  <p>
    <label>Name:</label>
    <input .../>
  </p>
  <p>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

How much markup (classes, etc.) do you typically provide to allow for the most flexible visual formatting of the form? That is, how much markup do you add to help with your css selectors and do you use generic selectors?

<form ...>
  <p class='name'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

vs.

<form class='person' ...>
  <p class='name string'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate date'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

In the second case, adding generic types ("date") straight from the database can make it more easy to consistently format date fields. Wrapping a grouping ("person") to show the model from which the fields come, can help too. (Or I could have used an internal DIV.) Yet, to increase css reuse, I find myself adding extra markup. In some books I've read I hear that the less markup, the better (and that line can be very gray though it rings true to me). For example, I could very well have used the markup from one of the prior blocks and added a lot more selectors to the css.

What are your principles for deciding just how much markup makes sense? Or how much to put on the css side?

Also, I know that I can select against the name of the input, but since that's a nested element I lose my ability to control formatting from the outer wrapper ("p") which is usually where I want that extra control.

Answer 1

I do try and keep html markup to a minimum.

HTML forms are the hardest thing to keep html and css to a minimum, as it is very hard to target all the various inputs across all browsers without adding classes to them, such as Textbox to textboxes etc.

If all your forms for that site use simple textboxes and not much of anything else, the minimal mark-up approach works just fine. However controls with complex mark-up such as the telerik RAD controls don't play with simple mark-up and often extra markup and classes are needed.

These small tricks add mark-up, but also make the css much cleaner and will no doubt making styling such elements much easier.

For other general html/css, I tend to use as few classes as possible, such as

.Menu {}
.Menu li {}
.Menu li a {}

This sort of pattern can be re-used a lot for repeated data, and templates can be made and designed with very little html mark-up.

Sometimes its un-avoidable adding classes and whatnot, but I think if your generally thinking about both css and html you should end up with slick markup.

From site to site, I rarely re-use CSS. Its so quick and easy knocking up styles for whatever you wish, re-designing an existing skin to fit a new site is often not worth it IMO.

Mainly with CSS I tend to take the knowledge i've learnt from previous sites and apply it to the new sites, to make coding for all browsers easy :)

Answer 2

I tend to use definition list tags to style my forms.

<form>
  <dl>

    <dt><label for="name">Name:</label></dt>
    <dd><input name="name" /></dd>

    <dt><label for="birthdate">Birthdate:</label></dt>
    <dd><input name="birthdate" /></dd>

    ...
  </dl>
</form>

I also use the following CSS:

FORM DT {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}

FORM DD {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}

More information here: http://www.clagnut.com/blog/241/

It's a lot of markup, but the effect is consistent and effective.

Another arguably acceptable method of styling forms is to use tables. Just think of the form as "interactive tabular data."

Answer 3

I wouldn't use a <p> tag to group a label and its field, since it's not a paragraph. If you have no other use for <fieldset> you could use one per "row". If you have three inputs for birthday then a fieldset is totally appropriate.

A definition list as Gavin suggested isn't a bad idea but it does seem like unnecessary markup - you can just style the labels and inputs to the right widths and float them.

Adding wrapper classes is also perfectly valid - remember that you don't have to use them in CSS, they add a semantic layer regardless. There may even be a microformat you can use in some cases.

You can also use attribute selectors to style inputs nicely:

input[type="text"], input[type="password"] {
  border: 1px solid #ccc;
  background: #fff;
}
input[type="submit"], input[type="reset"] {
  border: 1px solid #666;
  background: #ccc;
}

Answer 4

Personally I just do:

<form>
    <label for="foo">Foo</label>
    <input type="text" id="foo" name="foo" />
    <br />
    <label for="foo2" class="block">Foo 2</label>
    <textarea id="foo2" name="foo2"></textarea>
    <br />

Then for css it depends whether or not I want the element to be inline with it or not

form label.block{
    display: block;
}

Or you can block + float them like @DisgruntledGoat wrote. (I really hate extra markup)

Answer 5

After many years, I've arrived at:

<fieldset>
  <div>
    <label for="Whatever">A text field</label>
    <input type="text" id="Whatever" />
  </div>
  <div class="required">
    <label for="RequiredField">A required field</label>
    <input type="text" id="RequiredField" />
  </div>
  <div class="stretch">
    <label for="LongField">A long field (stretched across 100% form width)</label>
    <input type="text" id="LongField" />
  </div>
  <div class="cmd">
    <button type="submit">Do whatever</button>
  </div>
<fieldset>

Additionally, I have two CSS classes that I can apply:

fieldset div {
  clear: both;
}

fieldset.block label {
  display: block;
  font-weight: bold; /* labels above fields */
}

fieldset.aligned label:first-child {
  width: 20%;
  float: left;
}

fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
  width: 100%;
}

fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
  width: 79%; /* leave space for the label */
}