HTML DOM Form elements Collection

Last Updated : 31 Aug, 2022

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 to display length of input -->
    <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 to display value of 
        input field of input -->
    <script>
        function click1() {
            var valueVar = document.getElementById(
                    "users").elements[0].value;
 
            document.getElementById("paraID")
                .innerHTML = valueVar;
        }
    </script>
</body>
 
</html>