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