Open In App

HTML DOM Form Object

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 28 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads