HTML and CSS —

Grouping Form Fields

Another means of making your forms more accessible is to group form information. You'll recall that in tutorial 4, "Creating Tables," I showed you several ways to group table elements to make them more comprehensive. Well, the same concepts apply here, although different elements are used.

In the case of forms, you can break down areas of the form into specific sets of fields using the fieldset element. If you have a form with three contextual sections, such as Contact Information, Favorite Activities, and Reset or Submit, you can create fields around each of those. Then you can use the legend element to add a header for each of those sections, further providing context (see Example 5-14).

Example 5-14. Breaking forms into logical fields using fieldset
<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">

<fieldset>
<legend>Contact Information</legend>
First Name: <input type="text" name="firstname" id="firstname" size="25"
maxlength="40" /><br />
Last Name: <input type="text" name="lastname" id="lastname" size="25"
maxlength="40"/><br />
Phone: <input type="text" name="phone" id="phone" size="15" maxlength="0"  />
</fieldset>

<fieldset>
<legend>Favorite activities</legend>
<input type="checkbox" value="reading" name="reading" id="reading" />Reading<br />
<input type="checkbox" value="sports" name="sports" id="sports" checked="checked"
/>Sports<br />
<input type="checkbox" value="games" name="games" id="games" />Computer Games
</fieldset>

<fieldset>
<legend>Reset or Submit Your Answers</legend>
<input type="reset" value="reset" />
<input type="submit" value="submit" />
</fieldset>

</form>

If you check your work in a browser, you'll see that each fieldset is separated by a line around the field, and the legend text appears within the top of that line.

You can see how this grouping of controls within a form can be helpful to bring logic and context to anyone, especially to those with learning disabilities and blindness.

With fieldset and legend, you can provide far more assistance to individuals who might not otherwise be able to understand the form as explicitly (see Figure 5-15).

Figure 5-15. Using fieldset and legend to group and identify form fields.

QUANTUM LEAP

Remember, the default appearance of any HTML in a browser is just thata default. You can modify any presentation that HTML itself causes using CSS. So, in the previous example, you can style the fieldset sections to have different colors, use a different border style, and have more space between each section.

You also can style the legend text to match other fonts within your design, change color, change size, and do whatever you'd like. However, to keep the integrity of fieldset and legend, it's wise not to deviate too far from the defaults (such as removing the borders around the fieldsets altogether), to ensure that the accessibility features remain available.