CSS - Simple Form Styling

Last Update: 7.21.2008

Introduction

This article demonstrates using CSS to lay out an attractive XHTML form. This table-free form is simple to update, and highly accessible.


Demonstration

Here is the form - lightweight, semantic, and accessible. It's pretty simple - containing only a 3 input fields and a submit button.





Code

Here's the XHTML that makes up the form. In a real application, the form element would have an "action" attribute to define how it interacts with the server, but I left it off for simplicity in this demonstration.

<form>
  <label for="first">First Name:</label>
  <input type="text" name="first_name" id="first" size="20" maxlength="50" /><br />
  <label for="last">Family or Last Name:</label>
  <input type="text" name="last_name" id="last" size="20" maxlength="50" /><br />
  <label for="desc">Famous for:</label>
  <textarea rows="5" cols="20" id="desc">What is your claim to fame?</textarea> <br />
  <input type="submit" value="Submit" />
</form>

And here's the CSS that gets the job done.

<style type="text/css">
body
  { font-family: Arial, Verdana, Helvetica, sans-serif; }
form
  { border: solid #FFFFFF 1px;
    width: 28em;
    margin: 5px;
    padding: 5px;
    }
label
  { width: 6em;
    float: left;
    text-align: right;
    margin: .5em 1em;
    clear: both;
    }
input, textarea
  { font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: small;
    margin: .5em 0;
    width: 17em;
    }
input[type="submit"]
  { float: none;
    clear: both;
    width: auto;
    margin-bottom: 1em;
    margin-left: 8em;
    }
</style>

The magic with this form layout is that the label elements are floated left with a fixed width, and the text inside the labels is aligned right. This keeps the text aligned near the left side of the input fields. The input fields are not floated, but are pushed away from the left side of the form by the floated labels. The clearing line break ensures that none of the label or input elements stack up against each other.

Also note:


IE6 Modifications

This has been tested in Firefox 2, Internet Explorer 7, and Safari 3. Unfortunately, the code presented above won't quite work in IE6 (and lower versions, presumably). This is because IE6 doesn't recognize attributes as CSS selectors. For this styling in IE6, you will need to select the Submit button in a different manner. My suggestion is to add an ID to the button, and then add some conditional CSS for IE6 to style the submit button:

Here is new XHTML with an ID on the submit button:

<input type="submit" value="Submit" id="submit" />

And conditional comments to select the submit button, and declare the same styling as in the normal stylesheet.

<!--[if lte IE 6]>
<style type="text/css">
input#submit
  { float: none;
    clear: both;
    width: auto;
    margin-bottom: 1em;
    margin-left: 8em;
    }
</style>
<![endif]-->

Credits

This example is taken from Web Design in a Nutshell, 3rd Edition. Webcredible has a similar example of this simple CSS form, and Smashing Magazine provides some more advanced examples of form styling.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me