HTML | DOM Input Reset Object
The Input Reset Object in HTML DOM is used to represent the HTML <input> element with type=”reset”. This tag is used to access or create the <input> element. This element can be accessed by using getElementById() method.
Syntax:
document.getElementById("Input_ID");
This Input_ID is assigned to HTML <input> element.
Example-1: Creating <input> element with type = “reset”.
HTML
<!DOCTYPE html><html><head> <title> HTML DOM RESET Object </title></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Reset Object</h2> <button onclick="myGeeks()"> Click Here </button> <script> function myGeeks() { // creating input element with type = "reset" var x = document.createElement("INPUT"); x.setAttribute("type", "reset"); document.body.appendChild(x); } </script></body></html> |
Output:
- Before click on the button:
- After click on the button:
Example-2: Returning value of <input> element from “GeekReset” id using document.getElementById(“GeekReset”)
HTML
<!DOCTYPE html><html><head> <title> HTML DOM RESET Object </title></head><style> #Geek_p { font-size: 30px; color: green; }</style><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Reset Object</h2> <input type="reset" id="GeekReset" value="Reset form"> <br> <br> <button onclick="myGeeks()"> Click Here </button> <p id="Geek_p"></p> <script> function myGeeks() { // access input element with type = "reset" var x = document.getElementById("GeekReset").value; document.getElementById("Geek_p").innerHTML = x; } </script></body></html> |
Output:
- Before click on the button:
- After click on the button:
Example-3: Returning id of input element with type=”reset”.
HTML
<!DOCTYPE html> <html> <head> <title> HTML DOM RESET Object </title> </head> <style> #Geek_p { font-size: 30px; color: green; } </style> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Reset Object</h2> <input type="reset" id="GeekReset" value="Reset form"> <br> <br> <button onclick="myGeeks()"> Click Here </button> <p id="Geek_p"></p> <script> function myGeeks() { // access input element with type = "reset" var x = document.getElementById("GeekReset").id; document.getElementById("Geek_p").innerHTML = x; } </script> </body> </html> |
- Before click on the button:
- After click on the button:
Note: type=”reset” is use to reset all value to it’s initial value using “Reset Button”.
Supported Browsers:
- Google Chrome 1 and above
- Mozilla Firefox 1 and above
- Edge 12 and above
- Safari 1 and above
- Opera
Please Login to comment...