CSU 508 Homepage

UCTL
Homepage

CSU
Homepage

Forms and ADA compliance

You need to associate form controls and their labels with the LABEL element.
A LABEL is attached to a specific form control through the use of the "FOR" attribute. The value of the "FOR" attribute must be the same as the value of the "ID" attribute of the form control.

The FIELDSET element allows grouping of related controls, which makes the form easier for the user to understand. A FIELDSET must have a LEGEND. The LEGEND provides a caption for the FIELDSET.

<FORM NAME ="MyForm"
ACTION="http://www.csuohio.edu/cgi-bin/mailit5.sh?MyEmailID@csuohio.edu"
METHOD=POST>

<LABEL for="name">Name:</LABEL>
<INPUT type="text" ID="name" SIZE="50" NAME="name" value="Name"> <BR>

<P>
<FIELDSET>
<LEGEND>Sex</LEGEND>
<INPUT TYPE="radio" name="sex" ID="male" value="M" checked>
<LABEL FOR="male">Male</LABEL>
<INPUT TYPE="radio" name="sex" ID="female" value="F">
<LABEL FOR="female">Female</LABEL>
</FIELDSET>
</P>

<P>
<FIELDSET>
<LEGEND>Type of class</LEGEND>
<LABEL FOR="Art">
<input type="checkbox" name="ctype" value="Art" ID="Art" checked>Art
</LABEL><br>
<LABEL FOR="Astronomy">
<input type="checkbox" name="ctype" value="Astronomy" ID="Astronomy">Astronomy
</LABEL><br>
<LABEL FOR="C++">
<input type="checkbox" name="ctype" value="C++" ID="C++">C++
</LABEL><br>
<LABEL FOR="History">
<input type="checkbox" name="ctype" value="History" ID="History">History
</LABEL>
</FIELDSET>
</P>

<LABEL FOR="com">Comments:</LABEL>
<TEXTAREA ROWS=10 COLS=30 ID="com">Comments</TEXTAREA> <BR>
<INPUT TYPE="submit"> <INPUT TYPE="reset">

</FORM>

Please note that the "reset", "submit" and image buttons do not need labels, because they already have labels associated with the "value" attribute or the "alt" text for image buttons.

This method of coding allows the browser to tell the user which label applies to a given control. Generally, clicking on the label will position the cursor in the form field, or toggle the value of radio buttons or check boxes. This provides a larger target for the mouse.

Here is the form encoded above

Its the small things....

It is currently suggested that a FIELDSET be enclosed in a set of paragraph tags <P>....</P>. Be certain that the previous P tag is closed with </P>.
That way, browsers that do not yet support the FIELDSET tag will infer the start of a block-level element.

You may notice that the textboxes have an initial value, as well as the radio buttons and checkboxes. This is suggested as good practice.

Also, please note that the use of color on this page does not satisfy the Section 508 condition of structuring information via the use of color.
Fortunately, the information is still usable without the color, through context.

CSU 508 Homepage