Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get the number of forms in a document with JavaScript?
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
777 Views
