html

How to Create an HTML Cancel Button That Redirects to a URL

A button is created in HTML by first adding a button tag and then specifying the button type inside the opening tag and the text to be displayed on the button is written in between the opening and the closing button tags. Unlike other button types like submit and reset, there is no button type called “Cancel.”

So, the possible way to create a button that redirects the user to a certain URL or web page is to add the URL link of the web page to be displayed in the “javascript:window.location” object inside the opening button tag.

This post will explain the method to create a cancel button without needing to add the button type as cancel.

Creating a Cancel Button that Redirects to a URL

Let’s practically understand how to create a cancel button, the purpose of which will be to redirect the users to the URL of a web page when they click on the button. We simply need to create a button element to make a button and then add the URL inside it:

<button onclick="javascript:window.location='https://linuxhint.com';">Cancel</button>

In the above statement or the button element:

  • There is the opening button tag that contains the “onclick” attribute as the event handler so that when the user clicks the button, the operation defined in the “onclick” attribute will be performed.
  • In the “onclick” attribute, there is the “javascript:window.location” object, and the link to the URL is added after it. The link used as the example in this article will redirect the users to the “Linuxhint” web page.
  • Between the opening and closing button tags, there is the text (cancel) to be displayed on the button.

This will display the following results in the output:

The above explanation demonstrates the possible method to create a cancel button to redirect the user to the URL of a web page.

Conclusion

There is no button type in HTML called “Cancel,” but there is a possible way to create a cancel button that redirects the users to a certain web page URL. It requires creating a button element and adding the “onclick” attribute in the opening tag as the event handler. And then, specify the “window.location” object and add the URL of the web page that should be displayed on clicking the button.

About the author

Hadia Atiq

A Software Engineer and Technical Writer passionate about learning and spreading knowledge of the latest technology. I utilize my writing skills to help readers understand the importance and usage of modern technology.