HTML DOM Fieldset Object

HTMLWeb DevelopmentFront End Technology

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


Following are the properties for Fieldset object −

disabledTo set or return if the fieldset is disabled, or not
formTo return the reference to the form that contains the given fieldset.
nameTo set or return the name attribute value of a fieldset.
typeTo return the fieldset element type.


Following is the syntax for −

Creating a fieldset element −

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


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

Live Demo

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


This will produce the following output −

On clicking the CREATE button −

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");
Updated on 19-Feb-2021 07:44:28