HTML - DOM Document forms Property

Quiz

The forms is a read-only property used for returning all the form elements present within HTML document as a collection. The elements present in the collection are sorted and are presented in the same order as they appear in the HTML document.

Syntax

document.forms;

Properties

Property	Description
length	It return the number of <form> element present in HTML document.

Methods

Below table shows a list of methods offered by DOM forms collection.

Methods	Description
[index]	To return the <form> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of bound.
item(index)	To return the <form> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of range. It is similar to first method.
namedItem(id)	To return the <form> element from the collection with the given id. Null is returned if the id doesnt exist.

Return Value

It returns an HTMLCollection which lists all the <form> elements present in the document.

Examples of HTML DOM Document 'forms' Property

The following examples illustrates use of forms properties and methods.

Get Number of <form> Elements

In the following example, length property is used to return the number of <form> elements in document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <form id="FORM1">
        Fruit <input type="text" name="fname" value="Mango">
    </form>
    <form id="FORM2">
        Age <input type="text" name="Age" value="22">
    </form>
    <form id="FORM3">
        Password: <input type="password" name="pass" value="test">
    </form>
    <br>
    <button onclick="fun()">Click me</button>
    <p id="form"></p>
    <script>
        function fun() {
            let y = document.forms.length;
            document.getElementById("form").innerHTML = "Number of form elements : " + y;
        }
    </script>
</body>
</html>

Get Text Content of First <form> Element

The following example returns text content of the first <form> element using [index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <form id="FORM1">
        Fruit <input type="text" name="fname" value="Mango">
    </form>
    <form id="FORM2">
        Age <input type="text" name="Age" value="22">
    </form>
    <form id="FORM3">
        Password: <input type="password" name="pass" value="test">
    </form>
    <br>
    <button onclick="fun()">Click me</button>
    <p id="Sample">form id :<br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms[0].textContent 
                +"<br>";
            document.getElementById("form").innerHTML += x;
        }
    </script>
</body>
</html>

Get id of First <form> Element

The following example returns id of the first <form> element using item(index) method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <form id="FORM1">
        Fruit <input type="text" name="fname" value="Mango">
    </form>
    <form id="FORM2">
        Age <input type="text" name="Age" value="22">
    </form>
    <form id="FORM3">
        Password: <input type="password" name="pass" value="test">
    </form>
    <br>
    <button onclick="fun()">Click me</button>
    <p id="Sample">form id: <br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms.item(0).id 
                +"<br>";
            document.getElementById("form").innerHTML += x;
        }
    </script>
</body>
</html>

Get HTML Content of Specified id

The following example returns content of <form> element with specified id.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <form id="FORM1">
        Fruit <input type="text" name="fname" value="Mango">
    </form>
    <form id="FORM2">
        Age <input type="text" name="Age" value="22">
    </form>
    <form id="FORM3">
        Password: <input type="password" name="pass" value="test">
    </form>
    <br>
    <button onclick="fun()">Click me</button>
    <p id="Sample">HTML contetn with specified id :<br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms.namedItem("FORM2").innerHTML;
            document.getElementById("form").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
forms	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page