When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.
Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”
Cancel Button To Reset Form
<html> <head> <title>Form</title> </head> <body> <form method="post" action="form.html"> <label for="firstname">Firstname:</label><br/> <input type="text" name="firstname" value="" /> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="cancel" value="Cancel" /> </form> </body> </html> |
Redirect With The Cancel Button
To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.
<input type="button" name="cancel" value="Cancel" onclick="window.location='anyfile.html'" /> |
This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.