• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Forms > Sample Design: A Registration Form

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>

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint