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.
html
<!DOCTYPE html><html> <head> <title> HTML | DOM forms Collection </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> |
Output:
Before Click on the button:
After Click on the button:
Example 2:
html
<!DOCTYPE html><html> <head> <title> HTML | DOM forms Collection </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> |
Output:
Before Click on the button:
After Click on the button:
Example 3:
html
<!DOCTYPE html><html><head> <title>HTML | DOM forms Collection</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> |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM forms collection method are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Safari 1 and above
- Opera 12.1 and above
Please Login to comment...