Home >Web Front-end >HTML Tutorial >HTML DOM form collection
HTML DOM form collection
- WBOYforward
- 2023-09-01 14:49:01724browse
HTML DOM form collection is used to return all form elements present in the HTML document as a collection. The elements in the collection are sorted and displayed in the order in which they appear in the HTML document.
Properties
The following are the properties of the form collection-
| Properties | Description |
|---|---|
| length | It is a read-only property that returns the number of |
Method
The following is the method of form collection-
| Method | Description |
|---|---|
| [index] | Returns the |
| item(index) | The collection from the given index. The index starts at 0 and returns null if the index is out of range. |
| namedItem(id) | From the collection with the given id. If id does not exist, returns Null. |
Syntax
The following is the syntax for HTML DOM form collection - p>
document.forms
Example
Let’s take a look at the HTML Example of DOM Form Collection -
Live Demo
<!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-
Single When clicking the "Get IDS" button-
In the above example-
we first created three IDs as "FORM1" and "FORM2" form and "FORM3". The first two forms have an input element of text type and the third form has an input element of password type -
<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>
GET IDS button executes formCollect() method when user clicks-
<button onclick="formCollect()">GET IDS</button>
The formCollect() method gets the document.forms length property value (3 in our case) and uses it in the test expression inside the for loop. Using the index number on the form collection, we get their id and append it to the paragraph with id "Sample" for display -
function formCollect() {
for(var i=0;i<document.forms.length;i++){
var no=document.forms[i].id+"<br>";
document.getElementById("Sample").innerHTML +=no;
}
}The above is the detailed content of HTML DOM form collection. For more information, please follow other related articles on the PHP Chinese website!