Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML DOM Form Object

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

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

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

HTML DOM Form Object

Supported Browsers:

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

My Personal Notes arrow_drop_up
Last Updated : 28 Feb, 2023
Like Article
Save Article
Similar Reads
Related Tutorials