Styling+Your+Form

=Style Web Forms Using CSS=

A Registration Form
On a site that requires users to login, you’ll probably also offer a signup facility. CSS can help you make longer forms, such as registration pages, look attractive, too. The mark-up for the form we’ll work with follows (note that I’ve removed most of the states in the option list for brevity):



Here it is in the browser.

This form is laid out using a table. To keep the table mark-up down to a minimum, we can use CSS to style both the table and the form. First, to style the table, add the following to your style sheet: background-color: #F9FBFD; color: #000000; width: 440px; border: 1px solid #D7E5F2; border-collapse: collapse; }
 * 1) signup table {

border: 1px solid #D7E5F2; padding-left: 4px; }
 * 1) signup td {

The code dictates that these rules apply to any table and td that appears within an area with an id of ‘signup’. As such, these rules won’t affect the look of any other tables on your site. Most of this should look fairly familiar by now, however, note the line:

border-collapse: collapse;

This collapses the borders, so that space doesn’t appear between each cell in the table. To demonstrate the effect of this code, here’s how the form appears when the border-collapse line is removed from the CSS.



Here’s the form again, this time with the border-collapse line included in the CSS file:



There are two types of cells in the form: those that contain labels, and those that contain form fields. Differentiating between these cell types can make the form less cluttered and easier to scan — particularly if it’s lengthy. Create two classes in your style sheet ‘.labelcell‘ and ‘.fieldcell‘. Add the class ‘labelcell‘ to every td that contains a label, and ‘fieldcell‘ to every cell that contains a form field.

 Name  

**Putting It Together**
To conclude this article here are a couple of typical forms — for login and user registration — that show how we can use CSS to turn forms into an attractive interface feature.

Styling a Login Form
The first form we’ll look at is a login form. You might find a form like this on a site that requires the user to sign in, in order to access more features (e.g. an online bulletin board).

The HTML looks like this:

 Username:  Password:  



First, we’ll style the form tag itself. In an attached style sheet add the following CSS:

form#login { background-color: #CCCCCC; color: #000000; border: 1px solid #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; } We only want the form with the id of #login to be styled, and the rules we’ve defined give this kind of form a background color, a default text color, and a border. We’ve set the font family and size of the text within the form, and right-aligned the form’s contents.



The input fields for a login form often need only be small, as the input is simply a short username and password. We can set the width of the text input boxes using CSS. To do this, I’ve created a class called ‘#login .text’.

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width: 100px; margin-right: 6px;
 * 1) login .text {

}

I’ve also added a margin-right setting, to insert a little space between the end of the input box and the start of the next label. To make these changes affect the form, we need to add the class name to our username and password fields.

 



The final step with this form is to style the submit button, which is looking a bit large and clunky at the end of the form right now. So we’ll create another class, this time for a button within the #login form.

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #333333; color: #FFFFFF; margin-right: 6px; }
 * 1) login .buttons {

Apply this class to your submit button to see the completed login form.





I have created this form without using tables for the layout, however, all the techniques we’ve discussed could be applied to a form that’s within a table. The next example will look at styling within tables.

I’ve also created special classes for the smaller cells (in my form, these contain the select menu for state, and the zip code field). I’ve named these ‘.smalllabelcell‘ and ‘.smallfieldcell‘, which allows us to treat these cells separately. In your style sheet, add the following:

.labelcell { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #3670A7; background-color: transparent; width: 220px; }

.fieldcell { background-color: #F2F7FB; color: #000000; text-align: right; margin-right: 0px; padding-right: 0px; }

.smalllabelcell { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: transparent; color: #3670A7; width: 100px; }

.smallfieldcell { background-color: #F2F7FB; color: #000000; text-align: right; }

.labelcell { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #3670A7; background-color: transparent; width: 220px; }

.fieldcell { background-color: #F2F7FB; color: #000000; text-align: right; margin-right: 0px; padding-right: 0px; }

.smalllabelcell { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: transparent; color: #3670A7; width: 100px; }

.smallfieldcell { background-color: #F2F7FB; color: #000000; text-align: right; }

You should end up with something that looks like this:

You can now style the form fields within these cells. As we’ve already applied a class to the td, we can simply choose to style all input tags within the td to which that class is applied. Add the following to the style sheet:

.fieldcell input { width: 200px; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; margin-right: 0px; }

.smallfieldcell input { width: 100px; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; }

.smallfieldcell select { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; }

.fieldcell input { width: 200px; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; margin-right: 0px; }

.smallfieldcell input { width: 100px; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; }

.smallfieldcell select { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; border: 1px solid #284279; }



Adding a special class for our submit button finishes the job:

.button { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; margin-left: 12px; margin-top: 3px; margin-bottom: 2px; }

.button { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #D7E5F2; color: #102132; margin-left: 12px; margin-top: 3px; margin-bottom: 2px; }

In this article, we’ve explored some of the ways in which you can use CSS to change the look and feel of html forms. You now know how to:
 * Style the html elements, including form, input, select and textarea
 * Create classes for form elements
 * Use a combination of the above to create two very different forms