Wednesday, April 26, 2006

Form layout styling with CSS

You can style forms using CSS and definition lists instead of tables. This has only been tested in IE6 and Firefox. As a basis I define the form in HTML as follows:

<fieldset class="form">
 <legend>Add Contact</legend>
 <dl>
  <dt>Forename: </dt>
  <dd><input type="text" name="forename" id="forename" /></dd>
  <dt>Surname: </dt>
  <dd><input type="text" name="surname" id="surname" /></dd>
  <dt>Email: </dt>
  <dd><input type="text" name="email" id="email" /></dd>
  <dt></dt>
  <dd><input type="submit" value="Add" /></dd>
 </dl>
</fieldset>

And the CSS:

fieldset.form {
 width: 95%;
 border: 1px dotted #ccc;
 padding: 12px;
}

fieldset.form legend {
 font-weight: bold;
 background: #fff;
}

fieldset.form dl {
 float: left;
 clear: both;
}

fieldset.form dl dt {
 clear: left;
 float: left;
 width: 110px;
 margin: .5em 0;
 text-align: right;
}

fieldset.form dl dd {
 margin: .5em 0;
 float: left;
 padding: 0 0 0 4px;
}

* html fieldset.form dl dd {
 float: none;
 margin: .5em 0 0 0;
}

fieldset.form dl dt is the definition for the label accompanying an input control. It has a fixed width and is right-aligned. fieldset.form dl dd is the input control next to the label. The * html fieldset.form dl dd is used to fix a few bugs in IE - without it, the input controls are not next to the labels, and the seperation between items is greater than it should be.

Sample:

Add Contact
Forename:
Surname:
Email:

Tags: ,

No comments: