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
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 accessibility and the Disability Discrimination Act.
Copyright © 2004 Trenton Moss, webcredible All Rights Reserved