HomeApplying CSS to forms
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
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>
Positioning the form with CSS
The first thing we need to do to the form is make it line up nicely. In the old days this could only be achieved with tables - not anymore, courtesy of our old friend, CSS. First, we'll assign a class to each form item:
<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>
The two input boxes have been assigned the class, input-box, and the submit button, submit-button - hmm... how did we think up those names?
Now they've got their classes we'll need to assign some rules to them:
label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0
clear: both
}
.input-box
{
margin-bottom: 10px
}
.submit-button
{
margin-left: 5em;
clear: both
}
Right, let's go through that CSS bit-by-bit. We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we've got now (‘name’ and ‘e-mail’). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters.
The margin: 0 1em 10px 0 CSS command means the labels will have a margin above them of 0, to the right of 1em (so that the text isn't up against the input box), a bottom margin of 10px (to create some space between each line) and a left margin of zero. The clear:both CSS command is necessary to ensure the text (‘name’ and ‘e-mail’) starts on a new line.
The submit button has a left margin of 5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 1em right margin of the prompt text.
So, putting that altogether gives us this form:
Looks much better, but it's still rather plain. Let's use some more CSS to jazz up the form so it's more inline with the colour scheme on the page.
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
}
The final form
Drum roll... Here it is:
Here's the CSS we used to make this, all in one place:
label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0
clear: both
}
.input-box
{
float: left;
margin-bottom: 10px
color: #26a;
background: #feb;
border: #26a solid 1px
}
.submit-button
{
margin-left: 5em;
clear: both
color: #000;
background: #fb0;
border: 2px #9cf outset
}
fieldset
{
border: #26a solid 1px;
width: 20em
}
legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}
Take this further
This article only touches on what you can achieve with CSS and forms. You can pretty much apply any CSS command to a form item, so the only limit is your imagination. Play around with a form and see what you can come up with!
This article was written by Trenton Moss. He knows an awful lot about accessible web design.
09 dec 2003 - 9
]
[
]