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