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");
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output
- Before click on the button:
- After click on the button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
Recommended Posts:
- HTML | <object> form Attribute
- HTML | DOM Object form Property
- HTML | DOM Object Object
- HTML | form Tag
- HTML | <form> name Attribute
- HTML | DOM Form name Property
- HTML | form Attribute
- HTML | Design Form
- HTML | DOM Input URL form Property
- HTML | <form> novalidate Attribute
- HTML | DOM Form submit() Method
- HTML | DOM Form acceptCharset Property
- HTML | DOM Form reset() Method
- HTML | <form> target Attribute
- HTML | DOM Form enctype Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
