Tutorial 13: Giving Form to Forms - HTML with Style | 14 | WebReference

Tutorial 13: Giving Form to Forms - HTML with Style | 14

index123456789101112131415161718192021exercises1

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>
Personal Information

Gender:

Product selection

Which products are you interested in?

Please select an operating system:

Submission

index123456789101112131415161718192021exercises1

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/20.html

Created: May 28, 1998
Revised: February 25, 1999