HTML DOM forms collection

HTMLWeb DevelopmentFront End Technology

The HTML DOM forms collection is used for returning all the form elements that are present inside the HTML document as a collection. The elements present in the collection are sorted and are presented in the same order as they appear in the HTML document.

Properties

Following are the properties for forms collection −

PropertyDescription
lengthIt is a read-only property returning the number of <form> elements in the collection.

Methods

Following are the methods for forms collection −

MethodDescription
[index]To return the <form> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of bound.
item(index)To return the <form> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of range.
namedItem(id)To return the <form> element from the collection with the given id. Null is returned if the id doesn’t exist.

Syntax

Following is the syntax for HTML DOM forms collection −

document.forms

Example

Let us look at an example of the HTML DOM forms collection −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script>
   function formCollect() {
      for(var i=0;i<document.forms.length;i++){
         var no=document.forms[i].id+"<br>";
         document.getElementById("Sample").innerHTML +=no;
      }
   }
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>

Output

This will produce the following output −

On clicking the GET IDS button −

In the above example −

We have first created three forms with id “FORM1”,”FORM2” and “FORM3” respectively. The first two forms have an input element with type text and the third form having the input element with type password −

<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango" >
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22" >
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>

The GET IDS button execute the formCollect() method when clicked by the user −

<button onclick="formCollect()">GET IDS</button>

The formCollect() method gets the document.forms length property values which in our case is 3 and use it in the test expression inside the for loop. Using the index number on form collection we get their id and append it to the paragraph with id “Sample” for displaying −

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}
raja
Published on 20-Aug-2019 07:04:12
Advertisements