Applying CSS to Forms

By Trenton Moss
2004-06-24


The Original Form
Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up.

The original form
Name
E-mail

That form looks horrible! Here's the code behind it:

<form action="destination.htm">
<label for="name">Name</label>
<input type="text" id="name" /><br />
<label for="e-mail">E-mail</label>
<input type="text" id="e-mail" /><br />
<input type="submit" value="submit" />
</form>

Tutorial Pages:
» The Original Form
» Positioning the form with CSS
» Applying colours to the form
» Formatting the whole form
» The final form
» Take this further

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS