HTML DOM Form elements Collection
The Form element collection in HTML DOM is used to set or return the collection of all <input> elements inside a form element. The <input> elements are sorted as they appear in the source code.
Syntax:
formObject.elements
Properties: It returns a number of input elements inside the <form> element.
Methods: The DOM form elements collection contains three methods which are listed below –
- [index]: It is used to return the <input> element inside <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 <input> element inside the <form> element of specified index. The index value starts from 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 <input> element inside form from the collection which matches the specified id. NULL is returned if the id does not exist.
Return Value :- The Form element collection return the collection of all <input> elements inside a form element
Example 1: Below code returns the number of input fields inside the form.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Form elements Collection
</ title >
</ head >
< body >
< center >
< h2 >GeeksforGeeks</ h2 >
< p >< b >DOM Form elements Collection</ b ></ p >
< form action = "#" method = "post" id = "users" autocomplete = "on" >
< label for = "username" >Username:</ label >
< input type = "text" name = "username" id = "Username" > < br >
< label for = "password" >Password:</ label >
< input type = "password" name = "password" id = "password" >
< br >< br >
</ form >
< button onclick = "click1()" >Submit</ button >
< p id = "paraID" ></ p >
</ center >
< script >
function click1() {
var len = document.getElementById("users").elements.length;
document.getElementById("paraID").innerHTML =
"There are " + len + " input fields inside form";
}
</ script >
</ body >
</ html >
|
Output:
Example 2: Below code returns the value of the input fields for a specified index.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM form elements Collection
</ title >
</ head >
< body >
< center >
< h2 >GeeksforGeeks</ h2 >
< p >< b >DOM form elements collection values</ b ></ p >
< form action = "#" method = "post" id = "users"
autocomplete = "on" >
< label for = "username" >Username:</ label >
< input type = "text" name = "username"
value = "This is value" id = "Username" >
< br >
< label for = "password" >Password:</ label >
< input type = "password" name = "password"
id = "password" >< br >
</ form >
< button onclick = "click1()" >Submit</ button >
< p id = "paraID" ></ p >
</ center >
< script >
function click1() {
var valueVar = document.getElementById(
"users").elements[0].value;
document.getElementById("paraID")
.innerHTML = valueVar;
}
</ script >
</ body >
</ html >
|
Output:
Supported browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Opera 8 and above
- Firefox 1 and above
- Apple Safari 3 and above
Last Updated :
31 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...