HTML | DOM Form Object - GeeksforGeeks

31 Jan, 2019
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");

This Form_ID is assigned to HTML < form > element.
Example-1: Returning “form id” using document.getElementById(“myForm”).id;
<!DOCTYPE html><html>  <head>    <title>        HTML DOM Form Object    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <h2>DOM Form Object</h2>      <form align="center"           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></body>  </html>
Output
Before click on the button:
After click on the button:
Example-2: Returning the value of the target attribute in the form using document.getElementById(“Form_ID”).target;.
<!DOCTYPE html><html>  <head>    <title>        HTML DOM Form Object    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <h2>DOM Form Object</h2>      <form align="center"           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></body>  </html>
Output
Before click on the button:
After click on the button:
Example-3: Returning the number of elements in the form using document.getElementById(“Form_ID”).length;.
<!DOCTYPE html><html>  <head>    <title>        HTML DOM Form Object    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <h2>DOM Form Object</h2>      <form align="center"          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></body>  </html>
Output
Before click on the button:
After click on the button:
Supported Browsers:
Google Chrome
Mozilla Firefox
Edge
Safari
Opera
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills