Skip to main content

HTML DOM forms Collection in JAVA SCRIPT

Definition and Usage..
The forms collection returns a collection of all form elements in the document.
Note: The elements in the collection are sorted as they appear in the source code.
Tip: Use the elements collection of the Form Object to return a collection of all elements in a form.
Syntax: document.forms
CODING:
<!DOCTYPE html>
<html>
<body>
<form id="Iam1stForm">
  First Name: <input type="text" name="First Name " ><br>
  Last Name: <input type="text" name="Last Name ">
</form>
<form>
  Age: <input type="text" name="Age "><br>
  Address: <input type="text" name="Address ">
</form>
<p>last form..</p>
<form id="last">
  Hobby  : <input type="text" name="Hobby " ><br>
  Passion: <input type="text" name="Passion ">
</form>
<p>Click the button to display the number of form elements in the document.</p>
<button onclick="Intro()">Intro Fom</button>
<button onclick="formcopy()">Create last Form</button>
<button onclick="valueElement()">1st form input value of element</button>
<p id="demo"></p>

<script>
function Intro() {
    var x = "Number of Form:"+document.forms.length;
    var y = "<br>1stForm idName:"+document.forms[0].id;//document.forms.item(1).id;
    document.getElementById("demo").innerHTML = x+y;
}
function formcopy() {
    var c = document.forms.namedItem("last").innerHTML;
    document.getElementById("demo").innerHTML = c;
}
function valueElement() {
    var n = document.forms[0];
    var txt = "";
    for (var i = 0; i < n.length; i++) {
        txt = txt + n.elements[i].name +n.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Comments

Post a Comment