Tutorial 13: Giving Form to Forms
|
| ||||
| ||||
|
|
Grouping form controls
Two special elements, FIELDSET and LEGEND, are used to designate and label different sections in a form.
The FIELDSET element
- Context:
- Can only appear inside FORM elements.
- Contents:
- Can contain block elements and form controls, and at most one LEGEND element.
- Tags:
- Both start-tag and end-tag are required
Attributes for the FIELDSET element
- Accessibility key attribute
- Identifier and classification attributes
- Language information attributes
- Title attribute
- Inline style information attribute
- Intrinsic event handler attributes
The LEGEND element
- Context:
- Can only appear inside FIELDSET elements.
- Contents:
- Can contain inline elements.
- Tags:
- Both start-tag and end-tag are required
Attributes for the FIELDSET element
- Alignment attribute for captions and legends
- Identifier and classification attributes
- Language information attributes
- Title attribute
- Inline style information attribute
- Intrinsic event handler attributes
Field sets do nothing more than group the form into convenient sections. Their use is simple, although unfortunately they are not supported by Navigator. However, Internet Explorer 4.0 or later supports these elements, as does Mozilla.
<FORM ACTION="/cgi-bin/html/formdump.cgi" METHOD="GET" ENCTYPE="application/x-www-form-urlencoded"> <FIELDSET> <LEGEND>Personal Information</LEGEND> <P> <LABEL FOR="fn">First Name:</LABEL> <INPUT ID="fn" TYPE="text" NAME="firstname" SIZE="10"> <LABEL FOR="ln">Last Name:</LABEL> <INPUT ID="ln" TYPE="text" NAME="lastname" SIZE="10"> <P>Gender: <LABEL FOR="gm">Male</LABEL> <INPUT TYPE="radio" NAME="gender" VALUE="male" ID="gm"> <LABEL FOR="fm">Female</LABEL> <INPUT TYPE="radio" NAME="gender" VALUE="female" ID="fm"> </FIELDSET> <FIELDSET> <LEGEND>Product selection</LEGEND> <P>Which products are you interested in? <P><SELECT NAME="product" MULTIPLE> <OPTION VALUE="server" SELECTED>MORONS Server</OPTION> <OPTION VALUE="runtime" SELECTED>MORONS Run-time Application</OPTION> <OPTION VALUE="devkit">MORONS Developer's Kit</OPTION> </SELECT> <P>Please select an operating system: <P><SELECT NAME="platform"> <OPTION VALUE="win32">Windows 95, 98 or NT</OPTION> <OPTION VALUE="mac">Macintosh</OPTION> <OPTION VALUE="linux">Linux</OPTION> </SELECT> </FIELDSET> <FIELDSET> <LEGEND>Submission</LEGEND> <P><INPUT TYPE="reset" VALUE="Start Over"> <INPUT TYPE="submit" VALUE="Get info"> </FIELDSET> </FORM>
