How to Create Accessible Forms

| page 1 | page 2 | page 3 | page 4 |

Here is the HTML markup for the previous form. Notice the label, id, fieldset, and legend tags. On the next page, I'll show how each type of form control can be made accessible.

[skip over code]

<form method="post" action="">

<table width="50%" border="0" cellspacing="0" cellpadding="4">
 <tr bgcolor="#CCCCCC"> 
  <td> 
  <p align="right"><label for="fname">First Name</label></p>
  </td>
  <td> 
  <input id="fname" type="text" name="text33" size="12">
  </td>
 </tr>
 <tr> 
  <td> 
  <p align="right"><label for="lname">Last Name</label></p>
  </td>
  <td> 
  <input id="lname" type="text" name="text34" size="12">
  </td>
 </tr>
 <tr> 
  <td> 
  <p align="right"><label for="mi">Middle Initial</label></p>
  </td>
  <td> 
  <input id="mi" type="text" name="text35" size="1">
  </td>
 </tr>
 <tr> 
  <td> 
  <p align="right"><label for="hphone">Home Phone</label></p>
  </td>
  <td> 
  <input id="hphone" type="text" name="text36" size="12">
  </td>
 </tr>
 <tr> 
  <td> 
  <p align="right"><label for="wphone">Work Phone</label></p>
  </td>
  <td> 
  <input id="wphone" type="text" name="text37" size="12">
  </td>
 </tr>
 <tr bgcolor="#FFCCFF"> 
  <td> 
  <p align="right"><label for="country">Country</label></p>
  </td>
  <td> 
  <input id="country" type="text" name="text38" size="12">
  </td>
 </tr>
 <tr bgcolor="#CCCCFF"> 
  <td>
  <fieldset>
  <legend>Computer Type</legend> <br>
  <input id="mac" type="radio" name="radiobutton3" 
	value="radiobutton">
  <label for="mac">Mac </label><br>
  <input id="pc" type="radio" name="radiobutton3" 
	value="radiobutton">
  <label for="pc">PC</label><br>
  <input id="linux" type="radio" name="radiobutton3" 
	value="radiobutton">
  <label for="linux">Linux</label><br>
  </fieldset></td>
  <td>
  <fieldset>
  <legend>Internet Speed </legend> <br>
  <input id="288" type="radio" name="radiobutton4" 
	value="radiobutton">
  <label for="288"> 28.8 </label><br>
  <input id="56k" type="radio" name="radiobutton4" 
	value="radiobutton">
  <label for="56k">56k </label><br>
  <input id="t1" type="radio" name="radiobutton4" 
	value="radiobutton">
  <label for="fname">T1</label> 
  </fieldset></td>
 </tr>
 </table>
</form>

Now let's see some specific examples of individual form controls. Next page.

| page 1 | page 2 | page 3 | page 4 |

Top of Page || Return to Tutorials List