Group Boxes,Tab Order, and Labels

You can visually group together a set of controls on your form by placing a group box around them. A group box displays a labeled border around the set of controls.

Choose one: First Button
Second Button
Third Button
Figure 11-39. Using a group box around a form control.

The <fieldset> and <legend> Tags

A box is placed around a form control with the <fieldset> tag. The box is labeled with text coded in an enclosed <legend> tag. A fieldset is an in-line XHTML element; therefore, it must be enclosed inside a block-level tag. The general formats for the two tags are shown below.

<fieldset>
  <legend>text</legend>
  ...form control
</fieldset>
Figure 11-40. General formats for <fieldset> and <legend> tags.

A example group of fieldsets is shown in Figure 11-41.

Radio Buttons: First Button
Second Button
Third Button
Checkboxes: First Checkbox
Second Checkbox
Third Checkbox
Fourth Checkbox
Fifth Checkbox
Selection List:
Figure 11-41. Example fieldsets.

Code for these fieldsets is shown below. Since a fieldset expands to fill the width of its container, it is usually necessary to assign it a fixed width to control its placement and appearance. Note that the example fieldsets are assigned a width of 180 pixels to keep them from each stretching across the width of their enclosing division, permitting them to display side by side; also, they are vertically aligned at the top of their container division. A style sheet is applied to both the <fieldset> and <legend> tags to effect their styling.

<style type="text/css">
  fieldset {width:180px; vertical-align:top}
  legend   {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue}
</style>

<div> <-- Block-level container for fieldsets -->
<fieldset>
  <legend>Radio Buttons:</legend>
  <input type="radio" name="Radio"/>First Button<br/>
  <input type="radio" name="Radio"/>Second Button<br/>
  <input type="radio" name="Radio"/>Third Button<br/>
</fieldset>

<fieldset>
  <legend>Checkboxes:</legend>
  <input type="checkbox" name="Box1"/>First Checkbox<br/>
  <input type="checkbox" name="Box2"/>Second Checkbox<br/>
  <input type="checkbox" name="Box3"/>Third Checkbox<br/>
  <input type="checkbox" name="Box4"/>Fourth Checkbox<br/>
  <input type="checkbox" name="Box5"/>Fifth Checkbox<br/>
</fieldset>

<fieldset>
  <legend>Selection List:</legend>
  <select size="5">
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Fourth Option</option>
    <option>Fifth Option</option>
    <option>Sixth Option</option>
    <option>Seventh Option</option>
  </select>
</fieldset>
</div>
Listing 11-21. Code to group and label form controls.

Tab Order

Users often move through the fields on a form with the tab key. The order in which the fields are accessed is given, by default, by their physical order of coding on the XHTML form. Normally, this is the sequence in which you want users to fill in your forms -- from top to bottom, left to right.

You can, however, alter this tab order. In the following form the text fields have been indexed in reverse order. That is, you tab through the fields from bottom to top. Click in the first field, then use the tab key to proceed through the other fields to view this tab order.

Reversed Tab Order: 1.
2.
3.
4.
5.
Figure 11-42. Reversed tab order of form controls.

Each field on a form can be assign a tab order using tabindex="n" to assign a sequence number. By default, these sequence numbers run 1, 2, 3,...etc. from the first to last fields. However, you can assign index numbers in any order. A value of 0 causes the field to retain its physical tab order; a negative value removes the field from the tab order completely.

The following listing shows the code for the above text fields that you tabbed through in reverse order.

<div>
<fieldset>
<legend>Reversed Tab Order:</legend>
1. <input type="text" tabindex="5"/><br/>
2. <input type="text" tabindex="4"/><br/>
3. <input type="text" tabindex="3"/><br/>
4. <input type="text" tabindex="2"/><br/>
5. <input type="text" tabindex="1"/><br/>
</fieldset>
</div>
Listing 11-22. Code to reverse the tab order of form controls.

As meantioned, the normal order of tabbing through the controls on a form is from top to bottom and left to right, the physical sequence in which the fields appear on the form. So that users are not unduly confused, you should not alter this expected sequence unless the situation calls for it.

The <label> Tag

Some form controls automatically have labels associated with them (buttons) while most do not (text boxes, checkboxes, radio buttons, text areas, and menus). The <label> tag is used to define a label for XHTML form controls that do not have implicit labels. If you click the text within the label element, it toggles the control.

The "for" attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the "id" attribute of the associated control element. More than one <label> may be associated with the same control by creating multiple references via the for attribute.

The code below demonstrates the use of the <label> tag:

<form action="ThisPage.htm">
<p>Please enter the following information:</p>

<table>
<tr>
  <td>Name: </td>
  <td><label for="TheName">Enter Name</label><input id="TheName" type="text"/></td>
</tr>
<tr>
  <td>Password: </td>
  <td><label for="TheName">Enter Password</label><input id="ThePassword" type="password"/></td>
</tr>
</table>

</form>
Listing 11-23. Code to demonstrate use of the<label> tag.

The text between the opening and closing <label> tag becomes the label for the control. If the <label> tag is coded to the left of the control, the label appears on the left. On the other hand, if the <label> tag is coded to the right of the control, the label appears on the right.

Under XHTML 1.1 all form controls are required to have an associated label.