HTML DOM Fieldset type property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Fieldset type property is used for returning the fieldset element type. It will always be of type fieldset for a fieldset element. It is a read-only property.

Syntax

Following is the syntax for Fieldset type property −

fieldsetObject.type

Example

Let us take a look at an example for the Fieldset type property −

<!DOCTYPE html>
<html>
<head>
<script>
   function FieldType() {
      var field = document.getElementById("FieldSet1").type;
      document.getElementById("Sample").innerHTML = "The fieldset element is of type "+field;
   }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldType()">GET TYPE</button>
<p id="Sample"></p>
</body>
</html>

Output

This will produce the following output −

On clicking the GET TYPE button −

In the above example −

We have created a fieldset element with id “FieldSet1” inside a form element−

<form id="FORM1"> <fieldset id="FieldSet1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form>

We have then created a button “GET TYPE” that will execute the FieldType() function on being clicked by the user −

<button onclick="FieldType()">GET TYPE</button>

The FieldType() method will get the fieldset type attribute value and assigns it to the variable field. Since the type for the fieldset element will always be fieldset, it will return the value fieldset. This value is then displayed in a paragraph with id “Sample” using the the innerHTML property −

function FieldType() {
   var field = document.getElementById("FieldSet1").type;
   document.getElementById("Sample").innerHTML = "The fieldset element is of type "+field;
}
raja
Published on 19-Aug-2019 11:00:48
Advertisements