O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 8-1 provides the code. Figure 8-31 shows the form and tables without styles applied.

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required