FREE! Applying CSS to Forms Support
Forms are an essential part of interaction on the Internet but they can look rather drab. In this FREE article, suitable for beginners, Trenton Moss from the UK based webcredible consultancy takes us quickly through a method of making our forms a bit brighter nicer and user friendly.
Trenton Moss is the driving force behind webcredible; he knows an awful lot about accessibility and the Disability Discrimination Act.
If you want to delve deeper into using CSS to style forms check out these other DMXzone articles:
JavaScript Tricks for Usable Forms
Applying colours to the form
The three CSS commands we'll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).
So, let's say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border.
In addition to the above CSS, we would add in the following commands:
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
.submit-button
{
color: #000;
background: #fb0
border: 2px #9cf outset
}
(#26a is an abbreviation of #2266aa - you can apply this shorthand version with any colour value with repetitive numbers like this.)
We use outset for the button's border so that it looks like a button. If we used solid it would look flat. Here's how the form comes together:
One word of warning, be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you.
Whenever a form appears it automatically turns the background colour of input boxes to yellow - if you've specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they're writing when completing the form.
Formatting the whole form
We may want to give this form its own title and border. To do this we add the <fieldset> and <legend> commands to the HTML code:
<fieldset>
<legend>This is my form</legend>
<form action="destination.htm">
<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />
<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />
<input type="submit" value="submit" class="submit-button" />
</form>
</fieldset>
We'll apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:
fieldset
{
border: #26a solid 1px;
width: 20em
}
legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}