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:

1166_image6

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.

1166_image7

//

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" />

1166_image8

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" />

1166_image9

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.

Go to page: 1 | 2 | 3 | 4

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://guttersaustin.org/ Matt

    Styling your Log In form, Jesus Rachel, I’m only 20 and I already feel out of the loop! I guess I’m living back in the dawn of the dinosaurs with my 80 year old grandmother compared to you. I usually just install wordpress and throw up a semi customized theme (usually Thesis) and call it a day.

    Now I do have enough knowledge in CSS to change div sizes and alter background colors, but which books do you recommend for someone really looking to specialize in css, cause I obviously need some work!