Styling Forms with CSS

We have looked at some basic formating with CSS earlier, such as changing the font and using divs, and floating the elements to wrap elements, but now we will look at stylizing the form fields.

One thing which I recently saw, and had an ephaniy about, is instead of using divs to contain the form elements, instead choose to use an unordered list. Since we are dealing with a list of form elements, it even makes since. However, instead of hitting the enter key to go down a line, and getting messed up layout, Dreamweaver will automatically make a new li tag so we can enter new elements in the middle of forms if necessary.

Note: You may need to have multiple unordered lists to make this work correctly for your form. If I have breaks in my form for example, then each section will have its own list.

ul {
margin: 0px;
padding: 0px 0px 0px 1em;
width: 365px;
}
li {
clear: both;
margin: 0px;
padding: 2px 0px;
list-style: none;
}

To that effect, here is a form, fully CSS styled. We will now look at how we styled this form.

Style your Form Elements

• fieldset - used to group items together, we usually modify the background, font (for elements inside it), and the border.
  • fieldsets can be nested, and styled differently if wanted. So some have boxes, others just a straight line.
• legend - as part of the fieldset
• input - Input is tricky because it is used in so many places. One option is to use CSS expressions to check the type, so you can style submit buttons different than text boxes, etc. eg:

input[type="submit"] {
width: 120px;
margin: 0 auto;
float: none;
}

Provide Hints

Hints on what is requested of your visitors is often a good idea. Consider several items to help your user.

• Clearly mark required fields
• Using meaningful lable names
• Add "info" sections to provide instructions if necessary.
• Validate, and provide good error messages, so people know how to fix their issues.