CSS Cookbook

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