Javascript Reference - HTML DOM Form elements Collection

The elements collection returns a list of all elements in a form.

Browser Support


`elements`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = formObject.elements

Properties

Property	Description
length	Returns the number of form elements in the collection

Methods

Method	Description
[name_or_index]	Get element by index starting at 0
item(name_or_index)	Get the element from the collection by index or name
namedItem(name_or_id)	Get the element from the collection by the name or id attribute

Example

The following code shows how to show the number of elements in a form.


<!DOCTYPE html>
<html>
<body>
<!--  www .j  av a 2 s  . c o  m-->
<form id="myForm" action="url">
  First name: <input type="text" name="fname" value="abc"><br>
  Last name: <input type="text" name="lname" value="def"><br>
  <input type="submit" value="Submit">
</form> 
<button onclick="myFunction()">test</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myForm").elements.length;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the first element in a form by using [name_or_index] syntax.


<!DOCTYPE html>
<html>
<body>
<!--from w  ww . ja v  a 2  s. c  o m-->
<form id="myForm" action="url">
  First name: <input type="text" name="fname" value="abc"><br>
  Last name: <input type="text" name="lname" value="def"><br>
  <input type="submit" value="Submit">
</form> 
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myForm").elements[0].value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the first element in a form by using item(name_or_index) syntax.


<!DOCTYPE html>
<html>
<body>
<!--  w w  w . java  2s  .c o m-->
<form id="myForm" action="url">
  First name: <input type="text" name="fname" value="abc"><br>
  Last name: <input type="text" name="lname" value="def"><br>
  <input type="submit" value="Submit">
</form> 
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myForm").elements.item(0).value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the element with name="fname" in a form by using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<body>
<!--from w  w w .  j a  va  2  s  .  c o m-->
<form id="myForm" action="url">
  First name: <input type="text" name="fname" value="abc"><br>
  Last name: <input type="text" name="lname" value="def"><br>
  <input type="submit" value="Submit">
</form> 
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myForm").elements.namedItem("fname").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to get the value of each element in a form.


<!DOCTYPE html>
<html>
<body>
<!--from   w w w. j av  a2  s  . c o m-->
<form id="myForm" action="url">
  First name: <input type="text" name="fname" value="abc"><br>
  Last name: <input type="text" name="lname" value="def"><br>
  <input type="submit" value="Submit">
</form> 
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("myForm");
    var i;
    for (i = 0; i < x.length; i++) {
        console.log(x.elements[i].value);
    }
}
</script>

</body>
</html>

The code above is rendered as follows: