HTML | DOM forms Collection

The DOM forms collection is used to return the collection of all <form> elements in a HTML document. The form elements are sorted as they appear in the source code.

Syntax:

document.forms

Properties:: It returns the number of form in the collection of elements.



Methods: The DOM forms collection contains three methods which are listed below:

  • [index]: It is used to return the <form> element of the specified index. The index value starts at 0. NULL is returned if the index value is out of range.
  • item(index): It is used to return the <form> element of specified index. The index value starts at 0. NULL is returned if the index value is out of range. This method performs similarly to the above method.
  • namedItem(id): It is used to return the <form> element from the collection which matches the specified id. NULL is returned if the id does not exist.

Below programs illustrate the use of the documents.forms property in HTML:

Example 1: This example use length property to count number of form elements in the collection.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM document.forms() Property
        </title>
    </head>
      
    <body>
        <h1 style = "color:green">GeeksForGeeks</h1>
        <h2>DOM document.forms Property</h2>
      
        <!-- form 1 starts from here -->
        <form id="personal-info">
            <h3>Personal Information Area</h3>
            Name: <input type="text">
        </form>
        <!-- form 1 ends here -->
          
        <!-- form 2 starts from here -->
        <form id="home-info">
            <h3>Home Address Information Area</h3>
            Address: <input type="text">
        </form>
        <!-- form 2 ends here -->
          
        <!-- form 3 starts from here -->
        <form id="delivery-info">
            <h3>Delivery Type Area</h3>
            Delivery Speed: <input type="text">
        </form>
        <!-- form 3 ends here -->
      
        <p>
         Click the button below to count 
         the number of forms:
        </p>
          
        <button onclick = "countForms()">
         Count forms
        </button>
      
        <p>
         The total number of forms in
         this page is: 
        </p>
          
        <div class = "count"></div>
          
        <script>
            function countForms() {
      
                // Count number of forms
                let collection = document.forms.length;
                document.querySelector(".count").innerHTML
                                          = collection;
            
        </script>
    </body>
</html>                    

chevron_right


Output:
Before Click on the button:
Count forms - before
After Click on the button:
Count forms - after

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM document.forms() Property
        </title>
    </head>
      
    <body>
        <h1 style="color:green">GeeksForGeeks</h1>
        <h2>DOM document.forms Property</h2>
      
        <!-- form 1 starts from here -->
        <form id = "personal-info">
            <h3>Personal Information Area</h3>
            Name: <input type="text">
        </form>
        <!-- form 1 ends here -->
          
        <!-- form 2 starts from here -->
        <form id="home-info">
            <h3>Home Address Information Area</h3>
            Address: <input type="text">
        </form>
        <!-- form 2 ends here -->
          
        <!-- form 3 starts from here -->
        <form id="delivery-info">
            <h3>Delivery Type Area</h3>
            Delivery Speed: <input type="text">
        </form>
        <!-- form 3 ends here -->
      
        <p>
         Click the button below to find 
         all form IDs:
        </p>
        <button onclick="findFormIDs()">
         Find form IDs
        </button>
      
        <p>The ID of all the forms is: </p>
          
        <div class = "ids"></div>
          
        <script
            function findFormIDs() {
                let final = '';
                let collection = document.forms;
      
                // Run a loop upto the number of
                // forms in the collection
                for (let i = 0; i < collection.length; i++) {
      
                    // Add each form id to the final list
                    final += `<li> ${collection[i].id} </li>`;
                }
                  
                // Replace the inner HTML of the 
                // ID div to show the list
                document.querySelector(".ids").innerHTML = final;
            
        </script>
    </body>
</html>                    

chevron_right


Output:
Before Click on the button:
Find all form IDs - before
After Click on the button:
Find all form IDs - after

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>DOM document.forms() Property</title>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <h2>DOM document.forms Property</h2>
  
    <form id="personal-info">
        <h3>Personal Information Area</h3>
        Name: <input type="text">
    </form>
    <form id="home-info">
        <h3>Home Address Information Area</h3>
        Address: <input type="text">
    </form>
    <form id="delivery-info">
        <h3>Delivery Type Area</h3>
        Delivery Speed: <input type="text">
    </form>
  
    <p>
     Click the button below to find by form
     ID and get the name field:
    </p>
    <button onclick="returnForm()">
     Find by form ID
    </button>
    <p>The text in the name field is: </p>
    <div class="name"></div>
    <script>
        function returnForm() {
            // find by id of 'personal-info'
            let collection = 
                     document.forms.namedItem("personal-info");
  
            // access the first element in the 
            //collection and find its value
            // in this case it would be the name field
            let name = collection[0].value;
  
            document.querySelector(".name").innerHTML = name;
  
        }
    </script>
</body>
</html>                    

chevron_right


Output:
Before Click on the button:
Find by ID - before
After Click on the button:
Find by ID - after

Supported Browsers: The browser supported by DOM forms collection method are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.