HTML Input Type "Reset"

The HTML input type "reset" is used to create a button that resets all form controls to their initial values.
It provides a convenient way for users to clear the form and start over without manually deleting or modifying each input field.
Let's explore the attributes and examples of using the input type "reset" in HTML to cover all scenarios.

1. Basic Reset Button:

To create a basic reset button, use the input element with type="reset":

<input type="reset" value="Reset Form">

2. Custom Label:

You can specify a custom label for the reset button using the "value" attribute:

<input type="reset" value="Clear Fields">

3. Styling with CSS:

Apply CSS styles to customize the appearance of the reset button:

input[type="reset"] {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

And use the reset button:

<input type="reset" value="Clear Fields">

4. Confirmation Dialog:

You can add a confirmation dialog before resetting the form using JavaScript:

function confirmReset() {
  return confirm("Are you sure you want to clear all fields?");
}

And use the function with the reset button:

<input type="reset" value="Clear Fields" onclick="return confirmReset()">

5. Use Cases:

The input type "reset" is commonly used in web forms, especially in lengthy or complex forms where users may need to start over.
It provides users with a quick and intuitive way to clear all input fields and reset the form to its initial state.
Reset buttons can be beneficial in applications such as online surveys, registration forms, and data entry interfaces.
Using the reset button improves user experience by reducing frustration and streamlining the form submission process.

Conclusion:

The HTML input type "reset" offers a simple yet powerful feature for clearing form data and resetting input fields to their default values. By leveraging its various attributes and examples, you can enhance the usability and functionality of your web forms.

Experiment with different labels, styles, and confirmation dialogs to tailor the reset button to your specific requirements. With practice, you'll become proficient in using the input type "reset" to create efficient and user-friendly web forms.

Archive

Input Type Reset In Html