The FIELDSET and LEGEND Elements

The < FIELDSET > and <LEGEND> Elements

The <FIELDSET> and <LEGEND> elements enable you to format the appearance of elements in a form, and because you use them with forms, I'll discuss them in this chapter. The <FIELDSET> element draws a rectangle around the form, and a <LEGEND> element nested in that <FIELDSET> element enables you to give the <FIELDSET> element a caption, or legend. You can see the properties of these elements in Table 12.13note that the properties, methods , and events we saw in Chapters 5 and 6 also apply to these elements. Table 12.14 lists the additional events of <LEGEND> elements.

Table 12.13. The Properties of the <FIELDSET> and <LEGEND> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Property	NS2	NS6	IE5	IE5.5	IE6
`align`		x	x	x	x
	Read/write
	This attribute sets the alignment of the `<FIELDSET>` and `<LEGEND>` elements. The possible values for the < `LEGEND` > element are `"bottom"` (aligns to bottom-center), `"center"` (aligns to center), `"left"` (aligns to left), `"right"` (aligns to right), and `"top"` (aligns top-center). The Internet Explorer gives you more possible values for the `<FIELDSET>` element; here they are: `"absbottom"` (aligns the bottom of the `<FIELDSET>` with the absolute bottom of the surrounding text), `"absmiddle"` (aligns the middle of the `<FIELDSET>` with the middle of the surrounding text), `"baseline"` (aligns the bottom of the `<FIELDSET>` with the baseline of the surrounding text), `"bottom"` (aligns the bottom of the `<FIELDSET>` with the bottom of the surrounding text), `"left"` (the default, aligns the `<FIELDSET>` to the left of the surrounding text), `"middle"` (aligns the middle of the `<FIELD` `SET>` with the surrounding text), `"right"` (aligns the `<FIELDSET>` to the right of the surrounding text), and `"top"` (aligns the top of the `<FIELDSET>` with the top of the text).
`form`		x			x
	Read-only
	Holds the `form` object for the `<FIELDSET>` or `<LEGEND>` element. This property is read-only.

Table 12.14. The Events of the <LEGEND> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Event	NS2	IE4	IE5	IE5.5	IE6
`onafterupdate`		x	x	x	x
	Occurs in a data-bound object after updating the data in the data source.
`onbeforeupdate`		x	x	x	x
	Occurs in a data-bound object before updating the data in the data source.
`onerrorupdate`		x	x	x	x
	Occurs in a data-bound object when an error happened while updating data in the data source.

Here's an example for use in the Internet Explorer that enables you to set the align property of a <LEGEND> element on-the-fly by clicking a button marked Right, Left, or Center:

(Listing 12-16.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using &lt;FIELDSET&gt;, &lt;LEGEND&gt;, And &lt;LABEL&gt;          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function left()   {   document.getElementById("legend1").align = "left"   }   function center()   {   document.getElementById("legend1").align = "center"   }   function right()   {   document.getElementById("legend1").align = "right"   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using &lt;FIELDSET&gt;, &lt;LEGEND&gt;, And &lt;LABEL&gt;</H1>           <FORM>              <FIELDSET>                  <LEGEND ID="legend1" ACCESSKEY="L" TABINDEX="1" ALIGN="right">Answers</  LEGEND>                  <LABEL ACCESSKEY="Y">                      <INPUT TYPE="RADIO" NAME="ANSWER" VALUE="YES">Yes                  </LABEL>                  <BR>                  <LABEL ACCESSKEY="N">                      <INPUT TYPE="RADIO" NAME="ANSWER" VALUE="NO">No                  </LABEL>              </FIELDSET>  <BUTTON VALUE="Right" ONCLICK="right()">Right</BUTTON>   <BUTTON VALUE="Left" ONCLICK="center()">Center</BUTTON>   <BUTTON VALUE="Right" ONCLICK="left()">Left</BUTTON>  </FORM>      </BODY>  </HTML>

You can see this example at work in Figure 12.10, where I've clicked the Right button to realign the legend Answers to the right. (The default is to align to the left.)

Figure 12.10. Setting the alignment of a `<LEGEND>` element.

graphics/12fig10.gif

That finishes our work with buttons, check boxes, radio buttons , fieldsets , and legends in this chapter. We've gotten our start with HTML controlsin the next chapter, we'll build on that when we take a look at the HTML text-based and select controls.

The FIELDSET and LEGEND Elements