Brian Webster – Blog

After doing the semantic HTML code for a form, as shown in “Forms with CSS (1 of 3) – HTML Markup“, your form will look like something like:

While this is usable, we can improve it by adding some styles. Here are the styles I added:

fieldset
{
display: block;
margin: 0 0 1em 0;
border: 0 solid #FFFFFF;
border-top: 1px solid #000000;
padding: 0 1em 1em 1em;
width:275px;
}

fieldset legend {
font-weight:bold;
}

fieldset label, fieldset input, fieldset select {
display: block;
width: 150px;
float: left;
margin-top: 8px;
}

fieldset label {
width: 6em;
padding-right: 20px;
}

fieldset br {
clear: left;
}

The resulting page looks like:

As you can see, you can drastically change the look of the form with just a few styles. If you wanted, you could add still more styles for additional formatting.

The styles for this example were adapted from the web pages “CSS2 – Tableless Forms” and “The Man in Blue > Experiments > Form Layout“. I only made a few modifications from these examples.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (3 of 3) – Checkboxes