Style Web Forms Using CSS Article

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:

<form name="login" id="login" method="post" action="#">  
  <label>Username:  
  <input type="text" name="user" tabindex="1" />  
  </label>  
  <label>Password:  
  <input type="password" name="password" tabindex="2" />  
  <input type="submit" name="Submit" value="Submit" tabindex="3" />  
  </label>  
</form>

Without any styling, the form looks like this:

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’.

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

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.

<input name="user" type="text" id="user" tabindex="1" class="text"  />  
<input name="password" type="password" id="password" tabindex="2" class="text" />

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.

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

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

<input name="Submit" type="submit" tabindex="3" value="Submit" class="buttons" />

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.