HTML onreset Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onreset attribute is an HTML attribute used with the <form> element to specify a script that will run when a form is reset.

This attribute provides developers with the ability to define custom actions that should be executed when the user clicks the "Reset" button within a form.

🎯 Purpose of onreset

The primary purpose of the onreset attribute is to allow developers to trigger specific JavaScript functions or actions when a form is reset.

This can be useful for clearing or resetting additional elements, updating dynamic content, or performing other tasks based on user interactions.

💎 Values

The onreset attribute accepts JavaScript code as its value. This code will be executed when the form is reset.

Developers can assign functions or inline JavaScript statements to this attribute.

📄 Example

Here's a simple example demonstrating the use of the onreset attribute:

onreset.html

Copied

<form onreset="resetForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="reset" value="Reset">
</form>

<script>
  function resetForm() {
    // Custom JavaScript logic to be executed on form reset
    console.log("Form has been reset!");
  }
</script>

🧠 How it Works

In this example, the onreset attribute is used to call the resetForm function when the form is reset. The function logs a message to the console, but in a real-world scenario, you might perform more complex operations.

🔄 Dynamic Values with JavaScript

Similar to other HTML attributes, you can dynamically set the onreset attribute using JavaScript.

This allows you to change the behavior of the form reset dynamically. Here's a brief example:

onreset.html

Copied

<script>
  // Dynamically set the onreset attribute
  document.getElementById("dynamicForm").onreset = function() {
    alert("This form is being reset!");
  };
</script>

🧠 How it Works

In this script, the onreset attribute is dynamically set for a form with the id "dynamicForm." The assigned function will display an alert when the form is reset.

🏆 Best Practices

• Use the onreset attribute sparingly and only when custom actions are required upon form reset.
• Ensure that the JavaScript code assigned to onreset is error-free to prevent issues during execution.
• Keep the user experience in mind and provide clear feedback when custom reset actions are triggered.

🎉 Conclusion

The onreset attribute in HTML provides a way to enhance form interactions by allowing developers to define specific actions when a form is reset.

By understanding and appropriately utilizing this attribute, you can tailor the reset behavior to meet the specific needs of your web applications.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All