Recommended Free Tools
<input type="cancel"> is not a valid HTML input type. An invalid type value falls back to the text state, so it does not create a cancel button or trigger cancellation. Choose a submit action, a JavaScript-powered button, or a reset control according to what “Cancel” should do.
Why type="cancel" does not work
The current HTML Standard lists the supported input types and their states; it has no cancel state. An invalid type value is treated as text. That explains why <input type="cancel"> does not acquire button behavior or tell the browser to cancel or redirect.
As an Amazon Associate I earn from qualifying purchases.
A SitePoint Forums participant, felgall, put it plainly in the 2010 discussion: “There is no such HTML as <input type=“cancel”>”. The original poster reported that the control appeared as a box in Firefox 3.6.3 and Internet Explorer 8.0. Those are observations from May 2010, not a test of current browsers; consult the standard for the current standards-level answer.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose the control that matches the intended action
| What Cancel should do | Control | What happens |
|---|---|---|
| Send a cancel choice to the application | A submit button with a distinct name and value | The form is submitted; the server decides what cancellation means. |
| Run browser-side behavior, such as navigating away | A button with type="button" and an event handler |
The button does not submit the form by itself; JavaScript must provide the behavior. |
| Restore fields to their original values | A reset button | The form controls are reset; this does not submit a cancel action or redirect. |
Submit and reset are distinct behaviors, not interchangeable meanings of “cancel.” The standard defines the button states; application code determines what an application-level cancel action does.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Send a cancel action to the server
Use a separate submit control when cancellation needs server-side handling—for example, when the server must discard an uncommitted draft or choose a destination. Give the action a distinct value so the handler can distinguish it from Save:
<form method="post" action="/edit">
<!-- form fields -->
<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="cancel">Cancel</button>
</form>In the server handler for /edit, inspect the submitted action value and implement the intended cancellation behavior. The markup identifies the user’s choice; it does not decide which page to return to or what data to discard. Do not use an invalid type value or a reset control to submit the cancel action.
Run client-side behavior or navigate away
If the action should stay in the browser, use type="button" and add the required JavaScript. For example, this handler navigates to /return-page:
<button type="button" id="cancel">Cancel</button>
<script>
document.querySelector("#cancel").addEventListener("click", () => {
window.location.assign("/return-page");
});
</script>Replace /return-page with the intended destination. A type-button control does nothing on its own beyond being a button, so the handler supplies the navigation or other behavior. If cancellation requires server authorization or must perform a data-changing operation, use a server-handled submit action rather than assuming that client-side navigation completes that work.
Use Reset only to restore form fields
A reset control restores form controls to their initial values. It does not submit a cancel action, discard server-side data, or redirect the user. If the desired result is simply to return the fields to their starting values, reset is appropriate; if “Cancel” means leaving the page or asking the application to abandon work, choose one of the other patterns.
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
