HTML DOM Fieldset Object

The HTML DOM Fielset object represents the <fieldset> element.

Properties

Following are the properties for Fieldset object −

Property	Description
disabled	To set or return if the fieldset is disabled, or not
form	To return the reference to the form that contains the given fieldset.
name	To set or return the name attribute value of a fieldset.
type	To return the fieldset element type.

Syntax

Following is the syntax for −

Creating a fieldset element −

var p = document.createElement("FIELDSET");

Example

Let us look at an example for the HTML DOM Fieldset object −

<!DOCTYPE html>
<html>
<head>
<script>
   function createField() {
      var f = document.createElement("FIELDSET");
      var txt = document.createTextNode("FIELDSET element created");
      f.appendChild(txt);
      document.body.appendChild(f);
   }
</script>
</head>
<body>
<h2>Fieldset object example</h2>
<p>Create a fieldset element by clicking on below button</p>
<button onclick="createField()">CREATE</button> <br><br>
</body>
</html>

Output

This will produce the following output −

HTML DOM Fieldset Object

On clicking the CREATE button −

HTML DOM Fieldset Object

In the above example −

We have first created a CREATE button that will execute the createField() function when clicked by the user −

<button onclick="createField()">CREATE</button>

The createField() function creates a <fieldset> element using the createElement() method of the document object and assigns it to variable f. It then creates a text node using the createTextNode() method and forms the text node child of <fieldset> element using the appendChild() method. Finally the fieldset element along with its text node child are appended as childs of the document’s body −

function createField() {
   var f = document.createElement("FIELDSET");
   var txt = document.createTextNode("FIELDSET element created");
   f.appendChild(txt);
   document.body.appendChild(f);
}