Open In App

HTML DOM Form elements Collection

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

Supported browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Opera 8 and above
  • Firefox 1 and above
  • Apple Safari 3 and above


Last Updated : 31 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads