This chapter is from the book
This chapter is from the book
This chapter is from the book
16.10 Grouping Controls
HTML 4.0 defines the FIELDSET element, with an associated LEGEND, that can be used to visually group controls within a form. This capability is quite useful but is supported only by Internet Explorer. Hopefully, Netscape version 5 will add support for this element. In the meantime, you should reserve use of this element to intranet applications where all your users are using Internet Explorer.
Core Warning
As of version 4.7, Netscape does not support the FIELDSET element.
|
HTML Element: |
<FIELDSET> |
|
Attributes: |
None. |
This element is used as a container to enclose controls and, optionally, a LEGEND element. It has no attributes beyond the universal ones for style sheets, language, and so forth. Listing 16.7 gives an example, with the result shown in Figure 16–25.
){kind=link}
Figure 16–25 The FIELDSET element lets you visually group related controls.
Listing 16.7 Fieldset.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Grouping Controls in Internet Explorer</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">Grouping Controls in Internet Explorer</H2> <FORM ACTION="http://localhost:8088/SomeProgram"> <FIELDSET> <LEGEND>Group One</LEGEND> Field 1A: <INPUT TYPE="TEXT" NAME="field1A" VALUE="Field A"><BR> Field 1B: <INPUT TYPE="TEXT" NAME="field1B" VALUE="Field B"><BR> Field 1C: <INPUT TYPE="TEXT" NAME="field1C" VALUE="Field C"><BR> </FIELDSET> <FIELDSET> <LEGEND ALIGN="RIGHT">Group Two</LEGEND> Field 2A: <INPUT TYPE="TEXT" NAME="field2A" VALUE="Field A"><BR> Field 2B: <INPUT TYPE="TEXT" NAME="field2B" VALUE="Field B"><BR> Field 2C: <INPUT TYPE="TEXT" NAME="field2C" VALUE="Field C"><BR> </FIELDSET> </FORM> </BODY> </HTML>
|
HTML Element: |
<LEGEND> |
|
Attributes: |
ALIGN |
This element, legal only within an enclosing FIELDSET, places a label on the etched border that is drawn around the group of controls.
ALIGN
This attribute controls the position of the label. Legal values are TOP, BOTTOM, LEFT, and RIGHT, with TOP being the default. In Figure 16–25, the first group has the default legend alignment, and the second group stipulates ALIGN="RIGHT". In HTML, style sheets are often a better way to control element alignment, since they permit a single change to be propagated to multiple places.