How to make a button link to another page in HTML

Overview

HTML can be used in the following ways to facilitate redirection to another page:

  • Using JavaScript
  • Using the <form> tag
  • Using the <a> tag

Method 1: Using JavaScript

The onclick attribute executes a script when the button is clicked. It can be used in conjunction with the <button> or <input> tags.

A sample output using the two different tags is shown below. In order to open the link in a new window, the window.open method is used.

Using <button> and <input> tags to link to another page

Note: This method requires JavaScript to be enabled in your browser.

Method 2: Using the <form> tag

The action attribute in the <form> tag can be used to specify the URL to send the form data to upon submission.

Using <form> tag and action attribute to link to another page

Alternatively, the formaction attribute can be used inside the <button> or <input> tags with type=“submit”.

Note: Since formaction is an HTML5 specific feature, it may not always work as expected on older versions of popular browsers like Chrome and Safari. In some cases, a trailing question mark(?) is added at the end of the URL by default.

Using <form> tag and formaction attribute to link to another page

Method 3: Using the <a> tag

The href attribute can be used to add the link to a text and the <a> tag can then be stylized with CSS to look like a button as shown below:

Using <a> tag and CSS to link to another page
Copyright ©2024 Educative, Inc. All rights reserved