HTML <input type=”reset”> defines a button that resets form fields to their default values when clicked, allowing users to clear input data easily.
HTML <input type=”reset”> Syntax:
<input type="reset">
HTML <input type=”reset”> Example:
In this example, we are using a basic implementation of the input reset type.
<!DOCTYPE html> < html >
< head >
< title >
HTML Input Type reset
</ title >
</ head >
< body >
< center >
< h1 >GeeksForGeeks</ h1 >
< h2 >HTML Input Type reset</ h2 >
< form action = "/action_page.php" >
<!-- Email input -->
< label for = "email" >Enter your email:</ label >
< input type = "email" id = "email" name = "email" >< br >< br >
<!-- PIN input -->
< label for = "pin" >Enter a PIN:</ label >
< input type = "text" id = "pin" name = "pin" maxlength = "10" >< br >< br >
<!-- Reset button: Resets form fields to defaults when clicked. -->
< input type = "reset" value = "Reset" >
<!-- Submit button -->
< input type = "submit" value = "Submit" >
</ form >
</ center >
</ body >
</ html >
|
Output:
HTML <input type=”reset”> Example Explanation
- In this example we created a html form with input fields for name and password.
- Includes submit button to send data.
- Add <input type=”reset”> alongside <input type=”submit”>.
- Email and PIN inputs with corresponding labels for user input.
- A reset button provided to clear all form fields when clicked.
- A submit button included to send form data to the specified action URL
HTML <input type=”reset”> Use Cases
1. How to create a Reset Button in form using HTML ?
To create a reset button in a form using HTML, use the `<input type=”reset”>` element within the <form> tags.
2.How to reset all form values using a button in HTML ?
Use the HTML <input type=”reset”> element within a <form> to create a button that resets all form values.
3. How to reset input type = “file” using JavaScript/jQuery?
To reset an input type=”file” element using JavaScript/jQuery, set its value to an empty string or use the .val(”) method.
4.How to reset a form using jQuery with .reset() method?
To reset a form using jQuery’s .reset() method, select the form element and call .trigger(‘reset’) or .find(‘:input’).val(”) to reset input values.
HTML <input type=”reset”> Supported Browsers
- Google Chrome 1 and above
- Firefox 1 and above
- Edge 12 and above
- Opera
- Internet Explorer
- Apple Safari 1 and above