FIELDSET - Form Control Group
The FIELDSET element defines a form
control group. By grouping related form controls,
authors can divide a form into smaller, more manageable
parts, improving the usability disaster that can strike
when confronting users with too many form controls. The
grouping provided by FIELDSET also helps
the accessibility of forms to those using aural browsers
by allowing these users to more easily orient themselves
when filling in a large form.
While FIELDSET is not widely
supported by current browsers, it can be used safely by
explicitly closing any preceding P
element with </P> or by including
an empty P prior to the FIELDSET.
This causes non-supporting browsers to infer the start of
a block-level element even though they ignore the
block-level FIELDSET element.
The content of a FIELDSET element
must begin with a LEGEND to provide a
caption for the group of controls. Following the LEGEND,
FIELDSET may contain any inline or
block-level element, including another FIELDSET.
An example follows:
<FORM METHOD=post ACTION="/cgi-bin/order.cgi">
<FIELDSET>
<LEGEND ACCESSKEY=I>Contact Information</LEGEND>
<TABLE>
<TR>
<TD>
<LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
</TD>
<TD>
<INPUT TYPE=text NAME=name ID=name>
</TD>
</TR>
<TR>
<TD>
<LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
</TD>
<TD>
<INPUT TYPE=text NAME=email ID=email>
</TD>
</TR>
<TR>
<TD>
<LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
</TD>
<TD>
<TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
</TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
<P>Please select the product(s) that you wish to order:</P>
<P>
<LABEL ACCESSKEY=3>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
<A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=4>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
<A HREF="/reference/html40/">HTML 4.0 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
<A HREF="/reference/css/">Cascading Style Sheets Guide</A>
</LABEL>
</P>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=u>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
<P>
<INPUT TYPE=submit VALUE="Submit order">
<INPUT TYPE=reset VALUE="Clear order form">
</P>
</FORM>
Maintained by Nick Grant < htmlstudio@talk21.com
>
|