The DOM Form length Property is used to return the number of input field contained in the form.
Syntax:
formObject.length
Return Value: It returns a numeric value which represent the number of input field or elements in the Form.
Example-1: Return the number of input field.
html
<!DOCTYPE html><html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Form length Property.
</h2>
<form id="users"
action="#">
First name:
<input type="text"
name="fname"
value="Manas">
<br> Last name:
<input type="text"
name="lname"
value="Chhabra">
<br>
<input type="submit"
value="Submit">
</form>
<p>Click the "Try it" button to return
the number of elements contained in the form.</p>
<button onclick="myGeeks()">
Try it
</button>
<p id="sudo"
style="font-size:25px;color:green;">
</p>
<script>
function myGeeks() {
// Return the number of input field
var x =
document.getElementById(
"users").length;
document.getElementById("sudo").innerHTML =
"There are " + x +
" Input Field contained by the form.";
}
</script>
</body>
</html>
|
Output : Before Clicking On Button :
After Clicking On Button :
Example-2: Return the value of input field.
html
<!DOCTYPE html><html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Form length Property.</h2>
<form id="users"
action="#">
First name:
<input type="text"
name="fname"
value="Manas">
<br> Last name:
<input type="text"
name="lname"
value="Chhabra">
<br>
<input type="submit"
value="Submit">
</form>
<p>Click the "Try it" button to return
the value of each input field or element
contained in the form.</p>
<button onclick="myGeeks()">Try it</button>
<p id="sudo" style="font-size:25px;color:green;">
</p>
<script>
function myGeeks() {
// Return values of input field.
var x = document.getElementById("users");
var text = "";
var i = 0;
for (i = 0; i < x.length; i++) {
text = text + x.elements[i].value + "<br>";
}
document.getElementById("sudo").innerHTML = text;
}
</script>
</body>
</html>
|
Output: Before clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Form length Property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 12.1 and above
- Safari 3 and above