HTML DOM Fieldset Object

HTMLWeb DevelopmentFront End Technology

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

Properties

Following are the properties for Fieldset object −

PropertyDescription
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.

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 −

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");
   f.appendChild(txt);
   document.body.appendChild(f);
}
raja
Published on 19-Aug-2019 10:55:46
Advertisements