How to create a HTML Cancel button that redirects to a URL

Question

I am playing with the Buttons in the w3schools Tryit editor, and I am trying to figure out how to make my browser redirect to an URL when I click on the "Cancel" button.

Here's what I have tried:

<form action="demo_form.asp" method="get">    First name: <input type="text" name="fname"><br>    Last name: <input type="text" name="lname"><br>    <button type="submit" value="Submit">Submit</button>    <button type="reset" value="Reset">Reset</button>    <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button>  </form>

But it doesn't work. Any ideas?

Answer 1

cancel is not a valid value for a type attribute, so the button is probably defaulting to submit and continuing to submit the form. You probably mean type="button".

(The javascript: should be removed though, while it doesn't do any harm, it is an entirely useless label)

You don't have any button-like functionality though, so would be better off with:

<a href="http://stackoverflow.com"> Cancel </a> 

… possibly with some CSS to make it look like a button.

Answer 2

There is no button type="cancel" in html. You can try like this

<a href="http://www.url.com/yourpage.php">Cancel</a> 

You can make it look like a button by using CSS style properties.