Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Form elements Collection

  • Last Updated : 20 Nov, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
  • Internet Explorer
  • Opera
  • Firefox
  • Apple Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!