HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

The following is an example of FIELDSET markup: This is included in Figure 7.15 and is shown rendered by a browser in Figures 7.16 and 7.17. Note that this example uses style sheet instructions to format the FIELDSET—with Internet Explorer 4 (the only browser to currently support this element), this is the only mechanism for controlling FIELDSET element formatting.

<FIELDSET 

      STYLE=“width: 50%; margin-left:auto; margin-right: 0; 
             background: #ffffcc; border:solid double blue” >
<LEGEND STYLE=“color:blue; font-weight: bold;”
        ACCESSKEY=“m”> Personal Information </LEGEND>
<TABLE STYLE=“margin-left: 1em”>
<TR>
   <TD ALIGN=“right”><B>Last Name: </B></TD> 
   <TD><INPUT NAME=“personal_lastname” TYPE=“text”> </TD>
</TR>
<TR>
  <TD ALIGN=“right”><B>First Name:</B></TD>
  <TD><INPUT NAME=“personal_firstname” TYPE=“text”> </TD>
</TR>
<TR><TD ALIGN=“right”><B>Address:</B></TD>
  <TD><INPUT NAME=“personal_address”   TYPE=“text”> </TD>
</TR>

</TABLE></FIELDSET>

FIELDSET is not understood by Netscape Navigator 4.

LEGEND Element: Label for a FIELDSET

LEGEND specifies a label to associate with a FIELDSET. A LEGEND can only appear inside a FIELDSET, and there can be at most one LEGEND for each FIELDSET. A browser will use the LEGEND content to label the fieldset in some way, for example by embedding the text in the border around the fieldset.

In addition to the standard attribute set, LEGEND can also take the attributes ACCESSKEY and ALIGN. ACCESSKEY defines the access key for the associated FIELDSET, and allows for keyboard-based access of the element—once accessed via a key sequence, focus is transferred to the first input element inside the FIELDSET. ALIGN defines the alignment of the legend label relative to the fieldset, with possible values “top,” “bottom,” “left,” and “right,” with the obvious meanings. Internet Explorer 4, the only current browser that supports FIELDSET and LEGEND, only supports the values “left” and “right.”

Figure 7.15 and 7.16 illustrate the appropriate use and rendering of a LEGEND.

OPTGROUP Element: Subgroups of OPTIONs

OPTGROUP defines a group of OPTION elements within a SELECT list and is used to define hierarchical or collapsible lists. For example, the list:

<SELECT NAME=“region”>
   <OPTGROUP LABEL=“Canada”>
      <OPTION>Alberta
      <OPTION>British Columbia
      ...
   </OPTGROUP>
   <OPTGROUP LABEL=“United States”>
      <OPTION>Alabama
      <OPTION>Arkansas
      ...
   </OPTGROUP>
...
</SELECT>

would be presented as a cascading list, with the first level in the cascade being the country names (Canada, United States, etc.) and the second level (once a country is selected) being the names of the provinces or states. Note how the LABEL attribute defines the label to associate with a particular OPTGROUP.

If an OPTGROUP is marked as DISABLED, then the content of the element—namely, all OPTION or OPTGROUP elements inside the OPTGROUP—are disabled and cannot be accessed or selected by the user.

The OPTGROUP element is not supported on Internet Explorer 4 or Netscape Navigator 4. However, these browsers simply ignore the OPTGROUP elements and display all the OPTION elements as a single (possibly long) list. Thus, a selection list may still be usable, even if the OPTGROUP elements are not displayed. Of course, this may present problems if DISABLED were used to disable an entire OPTGROUP, so it is best to avoid using DISABLED for this purpose.

New FORM Attributes

As mentioned earlier, the four new attributes ACCESSKEY, DISABLED, READONLY, and TABINDEX play an important role in the structure and design of HTML 4 forms. The following sections describe each of these attributes in detail, and explain how they are used. Table 7.2 lists the elements that support them.

DISABLED Attribute (Internet Explorer 4 Only)

Under HTML 4, every input element (BUTTON, INPUT, OPTION, OPTGROUP, SELECT, and TEXTAREA) supports a DISABLED attribute. When this attribute is set, the item is treated as disabled, and cannot be selected or changed by the user. Also, the data content of a DISABLED element is never sent when the associated FORM is sent to a server. On a graphical browser, a disabled item should be rendered in gray or in some other way that distinguishes the item from an active one.

Internet Explorer 4 supports the DISABLED attribute on all the above elements except OPTION and OPTGROUP (the browser does not support OPTGROUP). In most cases, the disabled items are grayed out, as illustrated in Figure 7.16. This is not done, however, with INPUT TYPE=“image,” INPUT TYPE=“file,” and BUTTON elements having IMG elements as their only content: these elements when disabled look the same as when they are active. This can be somewhat confusing to users, so authors should be careful when disabling these input mechanisms.

READONLY Attribute (Internet Explorer 4 Only)

The INPUT (TYPE=“text” and TYPE=“password”) and TEXTAREA elements support a READONLY attribute. When this attribute is present, the associated element is treated as read-only: The element can be selected (for example, by tabbing or clicking on the element), but the content cannot be changed. Also, the data of a READONLY element are sent when the form is submitted.

READONLY does not affect the rendering of the displayed element, as illustrated in Figure 7.16. This should be contrasted with the effect of DISABLED, which leads to a graying-out of the element.