Recipe 5.8 Sample Design: A Registration Form

For some forms you might want to place the form elements into a two-column table, with the labels in one column and the fields in the other. Example 5-1 provides the code. Figure 5-21 shows the form and tables without styles applied.

Example 5-1. Stylized long form

<form action="registration.cfm" method="post"> 
  <table cellspacing="0"> 
    <tr class="header"> 
      <th colspan="2">Account Information</th> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Login Name*</th> 
      <td><input name="uname" type="text" size="12" 
maxlength="12" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Password*</th> 
      <td><input name="pword" type="text" size="12" 
maxlength="12" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Confirm Password* </th> 
      <td><input name="pword2" type="text" size="12" 
maxlength="12" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Email Address*</th> 
      <td><input name="email" type="text" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Confirm Email*</th> 
      <td><input type="text" name="email2" /></td> 
    </tr> 
    <tr class="header"> 
      <th colspan="2">Contact Information</th> 
    </tr> 
    <tr class="required"> 
      <th scope="row">First Name* </th> 
      <td><input name="fname" type="text" size="11" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Last Name* </th> 
      <td><input name="lname" type="text" size="11" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Address 1*</th> 
      <td><input name="address1" type="text" size="11" /></td> 
    </tr> 
    <tr> 
      <th scope="row">Address 2 </th> 
      <td><input type="text" name="address2" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">City* </th> 
      <td><input type="text" name="city" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">State or Province*</th> 
      <td><select name="state"> 
          <option selected="selected" 
disabled="disabled">Select...</option> 
          <option value="alabama">Alabama</option> 
        </select></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Zip*</th> 
      <td><input name="zipcode" type="text" id="zipcode" 
size="5" maxlength="5" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Country*</th> 
      <td><input type="text" name="country" /></td> 
    </tr> 
    <tr class="required"> 
      <th scope="row">Gender*</th> 
      <td> <input type="radio" name="sex" value="female" /> 
        Female
        <input type="radio" name="sex" value="male" /> 
        Male </td> 
    </tr> 
    <tr class="header"> 
      <th colspan="2">Misc. Information</th> 
    </tr> 
    <tr> 
      <th scope="row"> Annual Household Income </th> 
      <td> 
       <select name="income" size="1" > 
         <option selected="selected" disabled="disabled">
Select...</option> 
          <option value="notsay">I'd rather not say</option> 
        </select> </td> 
    </tr> 
    <tr> 
      <th scope="row">Interests</th> 
      <td><input name="interests" type="checkbox" 
value="shopping-fashion" /> 
        Shopping/fashion
        <input name="interests" type="checkbox" 
value="sports" /> 
        Sports
        <input name="interests" type="checkbox" 
value="travel" /> 
        Travel</td> 
    </tr> 
    <tr> 
      <th scope="row">Eye Color</th> 
      <td><input name="eye" type="checkbox" value="red" /> 
        Red
        <input name="eye" type="checkbox" value="green" /> 
        Green
        <input name="eye" type="checkbox" value="brown" /> 
        Brown
        <input name="eye" type="checkbox" value="blue" /> 
        Blue Gold</td> 
    </tr> 
  </table> 
  <input type="submit" name="Submit" value="Submit" 
id="buttonSubmit" /> 
  <input type="reset" name="Submit2" value="Reset" 
id="buttonReset" /> 
</form>

Figure 5-21. The form and table without styles applied

The first element to style is the table element. Set the border model as well as the text color and border around the table itself (see Figure 5-22):

table {
 border-collapse: collapse;
 color: black;
 border: 1px solid black;
}

Figure 5-22. A border placed around the table

Next, tackle the table header cells, which are located in the left column (see Figure 5-23). The table header cells is set to a width of 200 pixels, while the content inside the cell is aligned to the left, set to Verdana and sized to 0.7 em units:

th {
 width: 200px;
 text-align: right;
 vertical-align: top;
 border-top: 1px solid black;
 font-family: Verdana;
 font-size: 0.7em;
}

Figure 5-23. Refined table header cells

Adjust the padding of the header cells (see Figure 5-24):

 0.75em;
}

Figure 5-24. Padding applied to the table header cells

to soften the transition when reading the rows left to right (see Figure 5-25):

}

Figure 5-25. The stylized right column table cells

Certain Figure 5-26):

.required {
 color: red;
}

Figure 5-26. The required fields marked with red text

Note that the CSS rule states that the color is red, but for printing purposes the color will come out a shade of gray.

Adjust the form headers that indicate the different sections of the form by making the text uppercase and slightly larger than the other text in the form (see Figure 5-27):

.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
}

Figure 5-27. The refined form section headers

the width of the border on the left of the right column (4 pixels), and the padding of the right column (12 pixels):

.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
 padding-left: 220px;
}

Then add a touch of visual appeal by applying thicker borders to the top and bottom of the header (see Figure 5-28):

.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
 padding-left: 220px;
 border-bottom: 2px solid gray;
 border-top: 2px solid black;
}

Figure 5-28. Padding added to the section headers

Figure 5-29):

#buttonSubmit {
 margin-left: 220px;
 margin-top: 4px;
}

Figure 5-29. The Submit and Reset buttons moved into place