Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Reset object
The HTML DOM Input Reset object is associated with the <input> element with type="reset". We can create and access an input element with type reset by using the createElement() and getElementById() methods respectively.
The Reset button automatically clears all form fields to their initial values when clicked, making it useful for forms where users need to start over.
Syntax
Following is the syntax to create a reset input element −
<input type="reset" value="Reset" />
Following is the syntax to access a reset input element using JavaScript −
var resetButton = document.getElementById("resetId");
Properties
Following are the properties for the Input Reset object −
| Property | Description |
|---|---|
| autofocus | Sets or returns whether the reset button should get focus automatically when the page loads. |
| defaultValue | Sets or returns the default value of the reset button. |
| disabled | Sets or returns whether the reset button is disabled. |
| form | Returns a reference to the form containing the reset button. |
| name | Sets or returns the name attribute value of the reset button. |
| type | Returns the form element type for the reset button (always "reset"). |
| value | Sets or returns the value attribute (button text) of the reset button. |
Creating a Reset Button
We can create a reset button using JavaScript's createElement() method and then append it to the DOM.
Example
Following example demonstrates how to create a reset input element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Create Reset Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Reset Object Example</h2>
<p>Create an input field with type reset by clicking the below button:</p>
<button onclick="resetCreate()">CREATE RESET BUTTON</button>
<div id="container"></div>
<script>
function resetCreate() {
var resetBtn = document.createElement("INPUT");
resetBtn.setAttribute("type", "reset");
resetBtn.setAttribute("value", "Reset Form");
resetBtn.style.margin = "10px 0";
resetBtn.style.padding = "8px 16px";
document.getElementById("container").appendChild(resetBtn);
}
</script>
</body>
</html>
The output shows a button that creates a reset input when clicked −
Input Reset Object Example Create an input field with type reset by clicking the below button: [CREATE RESET BUTTON] After clicking: [CREATE RESET BUTTON] [Reset Form]
Accessing Reset Button Properties
We can access and modify the properties of an existing reset button using JavaScript.
Example
Following example shows how to access and modify reset button properties −
<!DOCTYPE html>
<html>
<head>
<title>Reset Button Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label>Name: <input type="text" name="username" value="John"></label><br><br>
<label>Email: <input type="email" name="email" value="john@example.com"></label><br><br>
<input type="reset" id="myReset" value="Clear All">
<button type="button" onclick="showProperties()">Show Properties</button>
</form>
<div id="output" style="margin-top: 10px;"></div>
<script>
function showProperties() {
var resetBtn = document.getElementById("myReset");
var info = "Reset Button Properties:<br>";
info += "Type: " + resetBtn.type + "<br>";
info += "Value: " + resetBtn.value + "<br>";
info += "Name: " + resetBtn.name + "<br>";
info += "Disabled: " + resetBtn.disabled;
document.getElementById("output").innerHTML = "<pre>" + info + "</pre>";
}
</script>
</body>
</html>
This example displays the properties of the reset button when the "Show Properties" button is clicked −
Name: John Email: john@example.com [Clear All] [Show Properties] Reset Button Properties: Type: reset Value: Clear All Name: Disabled: false
Working with Form Reset
The reset button automatically resets all form fields to their initial values. We can also trigger this behavior programmatically.
Example
Following example demonstrates the reset functionality with form validation −
<!DOCTYPE html>
<html>
<head>
<title>Reset Functionality</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Contact Form</h3>
<form id="contactForm">
<label>Full Name:</label><br>
<input type="text" name="fullname" value="Default Name" style="width: 200px; margin: 5px 0;"><br>
<label>Phone:</label><br>
<input type="tel" name="phone" value="123-456-7890" style="width: 200px; margin: 5px 0;"><br>
<label>Message:</label><br>
<textarea name="message" style="width: 200px; height: 60px; margin: 5px 0;">Default message</textarea><br><br>
<input type="reset" id="resetBtn" value="Reset Form" onclick="showResetAlert()">
<button type="button" onclick="modifyAndReset()">Modify & Reset</button>
</form>
<script>
function showResetAlert() {
alert("Form will be reset to default values!");
}
function modifyAndReset() {
document.getElementsByName("fullname")[0].value = "Modified Name";
document.getElementsByName("phone")[0].value = "999-888-7777";
setTimeout(function() {
document.getElementById("resetBtn").click();
}, 1000);
}
</script>
</body>
</html>
This demonstrates how the reset button restores form fields to their original HTML values, not empty values −
Contact Form Full Name: Default Name Phone: 123-456-7890 Message: Default message [Reset Form] [Modify & Reset]
Key Points
-
Reset buttons automatically restore form fields to their initial HTML values, not empty values.
-
The
valueproperty controls the text displayed on the reset button. -
Reset buttons work only within forms and affect all form controls in the same form.
-
The
formproperty provides a reference to the containing form element. -
Reset functionality can be triggered programmatically using
click()method orform.reset().
Conclusion
The HTML DOM Input Reset object provides a simple way to reset form fields to their default values. It can be created dynamically with JavaScript and offers various properties for customization. Understanding the reset button's behavior is essential for creating user-friendly forms that allow users to easily clear their input and start over.
239 Views
