HTML DOM Form Object

The Form Object in HTML DOM is used to represent the HTML < form > element. This tag is used to set or get the properties of < form > element. This element can be accessed by using getElementById() method. 

Syntax:

document.getElementById("Form_ID");

Note: This Form_ID is assigned to HTML < form > element. 

Example 1: Returning “form id” using document.getElementById(“myForm”).id;.

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<h2>DOM Form Object</h2>

<form id="myForm" method="GET" target="_blank"
      action="/action_page.php">
    First name:
    <br>
    <input type="text" name="fname"
           placeholder="FName">
    <br>
    <br> Last name:
    <br>
    <input type="text" name="lname"
           placeholder="LName">
    <br>
    <br>
</form>
<button onclick="myGeeks()">
    Submit
</button>
<p id="Geek_p" style="color:green;
            font-size:30px;">
</p>

<script>
    function myGeeks() {
        // Accessing form element.
        var txt = document.getElementById(
        "myForm").id;

        document.getElementById(
        "Geek_p").innerHTML = txt;
    }
</script>

Output

HTML DOM Form Object

Example 2: Returning the value of the target attribute in the form using document.getElementById(“Form_ID”).target;.

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<h2>DOM Form Object</h2>

<form id="myForm" method="GET" target="_blank"
      action="/action_page.php">
    First name:
    <br>
    <input type="text" name="fname"
           placeholder="FName">
    <br>
    <br> Last name:
    <br>
    <input type="text" name="lname"
           placeholder="LName">
    <br>
    <br>
</form>
<button onclick="myGeeks()">
    Submit
</button>
<p id="Geek_p" style="color:green;
            font-size:30px;">
</p>

<script>
    function myGeeks() {

        // Accessing form.
        var txt = document.getElementById(
        "myForm").target;


        document.getElementById(
        "Geek_p").innerHTML = txt;
    }
</script>

Output

HTML DOM Form Object

Example 3: Returning the number of elements in the form using document.getElementById(“Form_ID”).length;.

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<h2>DOM Form Object</h2>

<form id="myForm" method="GET" target="_blank" action="/action_page.php">
    First name:
    <br>
    <input type="text" name="fname" placeholder="FName">
    <br>
    <br> Last name:
    <br>
    <input type="text" name="lname" placeholder="LName">
    <br>
    <br>
</form>
<button onclick="myGeeks()">
    Submit
</button>
<p id="Geek_p" style="color:green;
            font-size:30px;">
</p>

<script>
    function myGeeks() {

    //Accessing form element.
    var txt = document.getElementById(
        "myForm").length;

        document.getElementById(
        "Geek_p").innerHTML = txt;
    }
</script>

Output

HTML DOM Form Object

Supported Browsers:

• Google Chrome
• Mozilla Firefox
• Edge 12 and above
• Safari
• Opera