Edit Rename Changes History Upload Download Back to Top

CSS Form Layout

The technique here is taken from the book The CSS Anthology by Rachel Andrew.

Here is some clean HTML for a form:

<form action="#" method="post">
 <fieldset>
  <legend>Personal Details</legend>
  <p>
   <label for="name">Name:</label> 
   <input type="text" name="name">
  </p>
  <p>
   <label for="emailAddress">Email Address:</label>
   <input type="text" name="emailAddress">
  </p>
 </fieldset>
 <input type="submit" name="ok" value="ok" />
</form>

The form tag bounds the form. Within the form we have a fieldset and a submit button. The fieldset causes a grouping line to be drawn around the fields within it. The submit button causes the form to be sent to the action.

In the fieldset we have the fields that the user will fill in. For each value we have a paragraph containing a label and an input. The label is tied to the paragraph via it's for attribute.

The default layout of the above form is not so nice, though. The labels and inputs do not line up in the way one might expect. The traditional response to this has been to use a table with two columns and have all the labels in the left hand column, and all the inputs in the right hand column.

We can avoid the need for a table and the resulting clutter using the following simple style directives:

form p {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 5px;
}
form p label {
	float: left;
	width: 30%;
}

Firstly, for a paragraph in a form we use clear: left to make sure that each paragraph starts underneath the previous label. Then, for a label which is in a paragraph which is (in turn) within a form, set the width to 30% of the container width (for example), and float to the left.

With this style applied all forms are nicely laid out with the labels and input boxes aligned.


Edit Rename Changes History Upload Download Back to Top