Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The ACCESSKEY attribute in the <LABEL> tag associates the letter Z with the form field label. Thus, whenever Windows users type Alt+Z or Macintosh users type Cmd+Z, they give focus to the Password field, which means that the cursor moves there and enables the user to type in a zip code.

If you assign an ACCESSKEY to a form field label, be sure you make the key known to your users. In the preceding example, the letter Z in Zip code was put between <U> and </U> tags so that it would appear underlined. This is consistent with the way Windows programs label their access keys (for example, the underlined F in the File menu means you can press Alt+F to activate the menu).

You can use the ACCESSKEY attribute with the <A> tag as well. This way, users can jump to a linked document by pressing the access key rather than by clicking the link.

Grouping Related Fields

Two other tags that were added to the HTML 4.0 form tags in recognition of nonvisual browsers are the <FIELDSET> and <LEGEND> tags. <FIELDSET> enables you to group related form fields together in a logical group, and <LEGEND> enables you to assign descriptive text to the group of fields. Neither of these might seem necessary on a standard visual browser, but for a visually impaired user with a speech-based browser, these extra features make a form much more usable.

---

NOTE:  One advantage of using <FIELDSET> grouping on a visual browser is that it facilitates tabbing through the form field. After the browser knows about a group of fields, it can tab you through the fields in sequence.

---

<FIELDSET> does not have any attributes, but it does have a companion closing </FIELDSET> tag. To create a logical grouping of fields, you place the tags that create the fields between <FIELDSET> and </FIELDSET>.

Each logical <FIELDSET> grouping can have a <LEGEND> tag associated with it. The text between <LEGEND> and </LEGEND> is what captions the grouping, and you can use the ALIGN attribute in the <LEGEND> tag to align the legend text with respect to the grouped fields. Possible values for ALIGN in this case are TOP, BOTTOM, LEFT, and RIGHT.

---

NOTE:  Aligning the legend text produces an effect only on visual browsers.

---

<LEGEND> can also take the ACCESSKEY attribute so that you can set up an access key for the form field grouping.

As an example of how <FIELDSET> and <LEGEND> work together, consider the following example:

<FORM ...>
<FIELDSET>
<LEGEND ALIGN=”LEFT”>Shipping Address</LEGEND>
<TABLE>
<TR>
<TD COLSPAN=2>Address:</TD>
<TD COLSPAN=4><INPUT TYPE=”TEXT” NAME=”SH_ADDR”></TD>
</TR>
<TR>
<TD>City:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”SH_CITY”></TD>
<TD>State:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”SH_STATE”></TD>
<TD>Zip:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”SH_ZIP”></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND ALIGN=”LEFT”>Billing Address</LEGEND>
<TABLE>
<TR>
<TD COLSPAN=2>Address:</TD>
<TD COLSPAN=4><INPUT TYPE=”TEXT” NAME=”BL_ADDR”></TD>
</TR>
<TR>
<TD>City:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”BL_CITY”></TD>
<TD>State:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”BL_STATE”></TD>
<TD>Zip:</TD>
<TD><INPUT TYPE=”TEXT” NAME=”BL_ZIP”></TD>
</TR>
</TABLE>
</FIELDSET>
...
</FORM>

In the preceding code, the form fields are grouped into two logical groups: shipping address fields and billing address fields. On a visual browser, the legend text Shipping Address and Billing Address appears above each logical grouping.

Disabled and Read-Only Fields

Many of the HTML 4.0 form tags accept attributes that render the fields they produce as disabled—meaning the field is grayed out—or as read-only, which means that the text appearing in the field by default cannot be changed. The DISABLED attribute takes care of disabling a field and can be used with the following tags:

•  <INPUT>

•  <LABEL>

•  <SELECT>

•  <OPTION>

•  <TEXTAREA>

•  <BUTTON>

You might want to disable an option in a drop-down list, for example, if you know from other information gathered from the user that the option was inappropriate to present.

---

NOTE:  Disabled form fields are skipped over as a user tabs through the form. Also, any values assigned to a disabled field are not passed to the server when the form is submitted.

---

The READONLY attribute works only for the <INPUT> tag with TYPE set to TEXT or PASSWORD and the <TEXTAREA> tag because these are the only tags that can be prepopulated with text. In these cases, the text is presented only for the user’s information, not so that it can be changed.

---

NOTE:  Read-only form fields are included when a user tabs through a form, and values assigned to these fields are passed to the server upon form submission.

---

Form Field Event Handlers

The W3C has also added a number of scripting event handlers to work with many of the form tags to facilitate the execution of script code while a user fills out a form. These event handlers include

•  onfocus

•  onblur

•  onselect

•  onchange

Two of the most widely usable event handlers are onfocus and onblur. Recall that a field receives focus when you’ve tabbed to it or clicked it to make it active. At the moment a field receives focus, you can choose to execute a script by setting the onfocus attribute of the corresponding form field tag equal to the name of a script defined in the document.