Lab: Forms in HTML

Estimated Time for Completion: 30 minutes

Prerequisite Knowledge:

To gain the most from this lab, you should have familiarity with:

Using a text editor (such as NotePad or vi) and performing common file operations (such as saving and copying files).
HTML coding for forms.

Files:

For this lab, you will need:

A web authoring software, such as Dreamweaver, or a text editing program such as "Notepad" (usually available from the Start Menu > Programs > Accessories).

Getting Started:

Take the "Practice Code: Non-compliant HTML Form" and make it accessible using the following steps:

Create "fieldset" tags around groups of controls that are logically similar.
For all "select" controls with many choices, use the "optgroup" tag to logically associate the options.
For all controls within the form, explicitly associate the controls with their instructions via the "label" tag.
Make sure all controls have the proper "tabindex" attribute and that the controls' tab order is logical.
Provide keyboard shortcuts using the "accesskey" attribute for any important locations in the form.
Add the "onkeypress" event handler for any control that responds to the "onclick" event (ensure that all mouse event handlers have equivalent keyboard event handlers).
Provide default text for all "text" and "textarea" controls.
Provide "alt" text for any graphical button controls.

Practice Code: Non-compliant HTML Form

Apply the above-listed steps to make accessible the following non-compliant HTML form.

<form action="process_application.htm" method="post"> <p>Full name: <input type="text" name="full_name" size="40"></p> <p>Mailing address: <input type="text" name="address" size="60"></p> <p>What is your gender? <input type="radio" name="gender" value="Male">Male</input> <input type="radio" name="gender" value="Female">Female</input></p> <p>Please select all that apply: <br> <input type="checkbox" name="considerations"> I anticipate having a GPA of at least 3.6; please review my application for high honors</input> <input type="checkbox" name="considerations"> I will attend the graduation ceremony</input> <input type="checkbox" name="considerations"> I will need special assistance during the graduation ceremony</input> <input type="checkbox" name="considerations"> I need copies of my transcript available at graduation</input> </p> <p>What is your major and specialization? <select name="major_specialization" size="5"> <option value="Accounting">Accounting</option> <option value="Applied Biology">Applied Biology</option> <option value="Computer Science">Computer Science</option> <option value="Economics">Economics</option> <option value="Education">Education</option> <option value="English">English</option> <option value="Finance">Finance</option> <option value="Management">Management</option> <option value="Mathematics">Mathematics</option> <option value="Music">Music</option> <option value="Philosophy">Philosophy</option> <option value="Physics">Physics</option> </select> </p> <p>Please provide any additional special instructions:<br> <textarea name="special_instructions" rows="10" cols="80"></textarea></p> <input type="submit" value="Submit Your Application"> <input type="reset" value="Reset This Form"> </form>

Sample Display of an Accessible HTML Form

When displayed in a Web browser, your corrected form from the "Practice Code" in this lab should look similar to the following sample of a properly-formatted Web form that is accessible to all users.

Personal Information

Full name (Alt,Shift-Alt,Ctrl-N):

Mailing address (Alt,Shift-Alt,Ctrl-M):

What is your gender? Male Female

More Information Needed Before Graduation

Please select all that apply:
I anticipate having a GPA of at least 3.6; please review my application for high honors
I will attend the graduation ceremony
I will need special assistance during the graduation ceremony
I need copies of my transcript available at graduation

What is your major and specialization?

Almost Done!

Please provide any additional special instructions (Alt,Shift-Alt,Ctrl-I):
Enter special instructions here

Sample Code for an Accessible HTML Form

Your corrected "Practice Code" of a form from this lab should look similar to the following sample of a properly-formatted HTML form that is accessible to all users.

<form action="process_application.htm" method="post"> <fieldset> <legend>Personal Information</legend> <p><label for="full_name">Full name (Alt-N):</label> <input type="text" name="full_name" id="full_name" size="40" tabindex="1" accesskey="n" value="Please enter your name"></p> <p><label for="address">Mailing address (Alt-M):</label> <input type="text" name="address" id="address" size="60" tabindex="2" accesskey="m" value="Please enter your current mailing address"></p> <p>What is your gender? <input type="radio" name="gender" id="g1" value="Male" tabindex="3"><label for="g1">Male</label></input> <input type="radio" name="gender" id="g2" value="Female" tabindex="4"><label for="g2">Female</label></input></p> </fieldset> <fieldset> <legend>More Information Needed Before Graduation</legend> <p>Please select all that apply:<br> <input type="checkbox" name="considerations" id="m1" tabindex="5" value="1"><label for="m1"> I anticipate having a GPA of at least 3.6; please review my application for high honors</label> </input><br> <input type="checkbox" name="considerations" id="m2" tabindex="6" value="2"><label for="m2"> I will attend the graduation ceremony</label> </input><br> <input type="checkbox" name="considerations" id="m3" tabindex="7" value="3"><label for="m3"> I will need special assistance during the graduation ceremony</label> </input><br> <input type="checkbox" name="considerations" id="m4" tabindex="8" value="4"><label for="m4"> I need copies of my transcript available at graduation</input></p> <p><label for="major_specialization">What is your major and specialization?</label> <select name="major_specialization" id="major_specialization" size="5" tabindex="9"> <optgroup label="Business"> <option value="Accounting">Accounting</option> <option value="Economics">Economics</option> <option value="Finance">Finance</option> <option value="Management">Management</option> </optgroup> <optgroup label="Arts"> <option value="Education">Education</option> <option value="English">English</option> <option value="Music">Music</option> <option value="Philosophy">Philosophy</option> </optgroup> <optgroup label="Sciences"> <option value="Applied Biology">Applied Biology</option> <option value="Computer Science">Computer Science</option> <option value="Mathematics">Mathematics</option> <option value="Physics">Physics</option> </optgroup> </select></p> </fieldset> <fieldset> <legend>Almost Done!</legend> <p><label for="special_instructions">Please provide any additional special instructions (Alt-I):</label><br> <textarea name="special_instructions" id="special_instructions" rows="10" cols="80" tabindex="10" accesskey="i"> Enter special instructions here </textarea></p> <input type="submit" value="Submit Your Application"> <input type="reset" value="Reset This Form"> </fieldset> </form>

The next page will present information on tables within HTML.

Previous Page
Page 10:
Forms in HTML

Top of Page arrow up

Page 11

Page 12:
Tables