How to get the number of forms in a document with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to get the number of forms in a document using JavaScript. Since different methods are used to create forms in an HTML document, it might get tricky to get the number of forms present. However, you can use some methods to count the forms created without the form tag.

Using the length Property

The most widely accepted method to create forms in HTML documents is using the <form> tag. Some websites also use <div> tags to create forms in the document. Hence, we will discuss the method to get the number of forms from <form> and <div> tags.

Syntax

Using the following syntax, we can get the number of forms in an HTML document with a <form> tag.

document.forms.length

Algorithm

Step 1 − Create a form in HTML document using <form> tag.

Step 2 − Make a variable to get the number of forms.

Step 3 − Use document.forms.length to get the number of forms.

Step 4 − Display the number of forms using the innerHTML property.

Example 1

In this example, we have created a single form to check how to document.forms.length can determine the actual number of forms. You can experiment with the code and increase the number of forms to see the output.


<html>
<body>
   <form>
     <input type="text">
      <input type="submit">
   </form>
   <p id=numform></p>
   <script>
      let forms = document.forms.length;
      document.getElementById('numform').innerHTML = "Number of forms: " + forms;
   </script>
</body>
</html>

Using querySelectorAll() to get the number of forms in a document

Since a form can be created within a website using <div>, you can get the number of forms using the querySelectorAll() method. Within the querySelectorAll(), you have to mention the type, class, id, and name that might include the term ‘form’.

Syntax

Using the following syntax, you can get the number of forms that are created in a document without the tag.

var forms = document.querySelectorAll("[type='form'],[name ='form'],[id='form']"); 
for(var i = 0; i < forms.length; i++);
 x.innerHTML = forms.length;

Algorithm

Step 1 − Create two forms one using <div> tag and other using tag.

Step 2 − For the first div, write type = ‘form’, and for the second div, id = ‘form’.

Step 3 − In JavaScript, use querySelectorAll() method to get both the <div> tags through the tag and id name

Step 4 − Use the increment operator and .length method to get several forms created using the <form> tag.

Example

In the following example, we have got the number of forms created without the tag and added it with the number of forms created with the <form> tag.


<html>
<body>
   <h4>Using <i>querySelectorAll()</i> to get the number of forms</h4>
   <div type="form">
      <input type="text">
      <input type="submit">
   </div>
   <form>
      <input type="text">
      <input type="submit">
   </form>
   <p id="numform"></p>
   <script>
      var elms = document.querySelectorAll("[type='form']");
      for (var i = 0; i < elms.length; i++);
      let x = elms.length;
      let forms = document.forms.length + x;
      document.getElementById('numform').innerHTML = "Number of forms: " + forms;
   </script>
</body>
</html>

While document.forms.length method is commonly used to get the number of forms present within a document, to find out the actual number of forms present, you should use querySelectorAll() method. There might be other methods to get the number of forms created in a document. The methods mentioned above are the most reliable