CSS to Improve Your Forms
5. Layout is the first way that CSS can be used to improve your Web forms. The most typical login screen you'll see generally has XHTML that looks like this:
<p><label>Username: <input type="text" /></label>
<label>Password: <input type="password" /></label>
<input type="submit" value="Submit" /></p>
But while the basic layout is okay, it could be a lot better. Use CSS to fiddle with the size of the fonts, the width of the entire form, the form elements, and the margins and padding on everything and you get a form that looks a lot better.
6. Colors on form elements make them a lot more usable. Humans are visually oriented, and colors make your forms easier to understand and fill out. Like with almost all XHTML elements, you can change the background colors, foreground or text colors, and border colors. Modifying the form colors is a great way to improve their usability.
See a fully styled login form.
7. Tableless forms can be done relatively easily with CSS and XHTML. Labels make it easy to lay out a form using relatively simple CSS and no tables. I feel that it's a valid use of tables to display forms - because they are a form of tabular data. But if you don't want to use tables, labels are a great compromise.
Using CSS to lay out forms makes them more usable because the code can be written in semantic order and much simpler. So the pages download more quickly and are easier for the browsers to render fast. It's easy to forget that speed is the ultimate usability failure. If your pages are slow they aren't as usable as faster pages.
The key to using the label element for layout is to give it space in the document flow by changing it and the input tags of your form from inline elements to block. Then you can float them within the form and lay out the form just like you would any other block element. If your labels have large amounts of text, you'll need to play with the widths
The XHTML looks like this:
<label for="name">Name</label>
<input type="text" name="name" id="name">
<br>
<label for="address2">Address</label>
<input type="text" name="address2" id="address2">
<br>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone">
<br>
Note the final <br> following the input fields. This is there so that the rest of the page does not line up to the right of the final form element. I tehn use this CSS:
label, input {
display: block;
width: 15em;
float: left;
margin-bottom: 0.5em;
}
label {
text-align: right;
width: 5em;
padding-right: 1em;
}
br {
clear: left;
}
See the tableless form layout.
8. Improve submit buttons with CSS and you'll improve your HTML forms. There are lots of ways to add submit buttons to forms, but most of them are ugly in the default configuration. But by adding color, fonts, and borders, you can adjust how your submit buttons to make it look better. See a bunch of different submit buttons.
And don't forget to layout your submit button within the form. Most submit buttons look best lined up with the text boxes, rather than with the labels. See the submit button in a tableless form.
Beyond CSS you can also use scripts to improve your form usability. The following simple form scripts will help your readers use your forms.
