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):

<form name="signup" id="signup" method="post" action="#">  
  <table>  
    <tr>    
      <td colspan="2"><label for="name">Name</label></td>  
      <td colspan="2"> <input type="text" name="name" id="name" tabindex="1" /></td>  
    </tr>  
    <tr>    
      <td colspan="2"><label for="address1">Address Line 1</label></td>  
      <td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td>  
    </tr>  
    <tr>    
      <td colspan="2"><label for="address2">Address Line 2</label></td>  
      <td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td>  
    </tr>  
    <tr>    
      <td colspan="2"><label for="city">City</label></td>  
      <td colspan="2"> <input type="text" name="city" id="city" tabindex="4" /></td>  
    </tr>  
    <tr>    
      <td><label for="state">State</label></td>  
      <td><select name="state" id="state" tabindex="5">  
          <option value="">-- Select ---</option>  
          <option value="AL" >Alabama</option>  
          <option value="AK" >Alaska</option>  
        </select></td>  
      <td><label for="zip">Zip</label></td>  
      <td> <input type="text" name="zip" id="zip" tabindex="6" /></td>  
    </tr>  
    <tr>    
      <td colspan="2"><label for="email">Email Address</label></td>  
      <td colspan="2"><input type="text" name="email" id="email" tabindex="7" /></td>  
    </tr>  
    <tr>    
      <td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" /></td>  
    </tr>  
  </table>  
</form>

Here it is in the browser.

1166_image10

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:

 #signup table {  
  background-color: #F9FBFD;  
  color: #000000;  
  width: 440px;  
  border: 1px solid #D7E5F2;  
  border-collapse: collapse;  
}  
  
#signup td {  
  border: 1px solid #D7E5F2;  
  padding-left: 4px;  
}

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.

1166_image11

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

1166_image12

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.

<tr>    
    <td colspan="2" class="labelcell"><label for="name">Name</label></td>  
    <td colspan="2" class="fieldcell">    
        <input type="text" name="name" id="name" tabindex="1" />  
    </td>  
</tr>
Go to page: 1 | 2 | 3 | 4
Rachel is the Director of edgeofmyseat.com, a Web solutions company in the UK. She has worked on a number of books as a co-author, and is a member of the Web Standards Project, serving on the Dreamweaver Task force. Rachel is the author of SitePoint's The CSS Anthology and Build Your Own Standards Compliant Website Using Dreamweaver 8.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


No Reader comments

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.