Teach with us

HTML DOM Fieldset name property

The HTML DOM Fieldset name property is used for getting or setting the name attribute value of a <fieldset> element. The name attribute helps in identifying the form data after the form has been submitted or for simply referencing the form elements.

Syntax

Following is the syntax for −

Setting the fieldset name property −

fieldsetObject.name = name

Here, name specifies the fieldset name.

Example

Let us look at an example for the Fieldset name property −

Live Demo

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

Output

This will produce the following output −

On clicking the GET NAME button −

In the above example −

We have first created a fieldset with name “FS1” and id “FieldSet1” inside a form element −

<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<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 GET NAME button that will execute the fieldname() method on being clicked by the user −

<button onclick="fieldName()">GET NAME</button>

The fieldname() method gets the fieldset element using the getElementById() method. It then gets its name attribute value and assigns it to variable field. This value is then displayed in the paragraph with id “Sample” and assigns text to it using the innerHTML property −

function fieldName() {
   var field = document.getElementById("FieldSet1").name;
   document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}
Updated on 19-Feb-2021 07:46:39

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements