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
HTML DOM forms collection
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 −
| Property | Description |
|---|---|
| length | It is a read-only property returning the number of <form> elements in the collection. |
Methods
Following are the methods for forms collection −
| Method | Description |
|---|---|
| [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 −
<!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;
}
}
295 Views
