Note : The <FIELDSET> element is a new element introduced in HTML 4.0 draft specifications and is only supported by Internet Explorer 4.0 and above.

The <FIELDSET> element can be used to provide a framed container around any other HTML elements. Visual Basic developers will be familiar with the <FIELDSET> frame concept - it being similar to the 'Frame' control in Visual Basic.

<FIELDSET> requires that the first element it contains to the <LEGEND>, to provide the legend for the field set. Note that <FIELDSET> elements can be nested to contain discrete 'groups' of HTML elements, inside a larger fieldset container group.

<FIELDSET> accepts the following attributes :

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FIELDSET> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FIELDSET> element for scripting purposes. Any <FIELDSET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <FIELDSET> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FIELDSET> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FIELDSET> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FIELDSET> section.

Examples
The following HTML fragment is part of the HTML that produces the <FIELDSET> displayed below.

<FIELDSET ID="fld1">
<LEGEND ALIGN="left">Choose a colour</LEGEND>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD><LABEL FOR="radRed">Red : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="radRed"></TD>
<TD><LABEL FOR="radOrange">Orange : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Orange" ID="radOrange"></TD>
</TR>
. . .
</TABLE>
</FIELDSET>

Every <FIELDSET> element in a document is an object that can be manipulated through scripting. Note that scripting of the <FIELDSET> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <FIELDSET> element.

<FIELDSET...> Properties
The <FIELDSET...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <FIELDSET> element supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <FIELDSET> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <FIELDSET> element.

scrollHeight
The scrollHeight property reflects the contents of the <FIELDSET> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <FIELDSET> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <FIELDSET> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <FIELDSET> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <FIELDSET> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <FIELDSET> element.

<FIELDSET...> Methods
The <FIELDSET...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <FIELDSET> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <FIELDSET> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <FIELDSET> element, forcing the onfocus event to fire.

<FIELDSET...> Events
The <FIELDSET...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <FIELDSET> element supports the following events:

onblur
When the referenced <FIELDSET> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <FIELDSET> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte

Questions:

• Isn't this page a little out of date? "FIELDSET only supported by Internet Explorer 4 and above"? James Newton of MassMind replies: It's /still/ only supported by IE 4 and up. But feel free to update it if you find an error or something missing.+

  +

• spammakemefren3000TakeThisOuT at yahoo.com asks:

  How to swap the fieldsets in a form?Assume there is a form that contains fieldsets(ex: filedsetA and fieldsetB) included in the s of a table. The fieldsets themselves contain elements arranged inside a table. Now on certain action, I need to swap the two fieldsets. i.e the fieldsetA should go on the place of fieldsetB and vice versa.

  James Newton of James Newton's Massmind replies: Swapping involves a temporary variable to hold the value from a field in set A while moving the corresponding field in set B to set A. E.g. the list of actions is to first copy the value of the first field of set A into the temp var, then set the value of the first field of set A to equal the value of the first field of set B, then set the value of the first field of set B to equal the value of the temp var. Repeat the above for the second and remaining fields.+

  +

Code:

Comments:

See also:

• https://www.youtube.com/watch?v=iX_QyjdctsQ&t=658s +

  .