How to Redirect HTML Page to Another HTML Page Using Button?

You can redirect an HTML page to another HTML page using a button by employing various methods, including using the onclick attribute with JavaScript, placing a button inside a form, or styling an anchor tag to look like a button.

Based on the reference, here are common techniques to achieve this redirection:

Methods for Button Redirection

Several approaches allow you to trigger a page redirect when a user clicks a button or a button-like element. Each method has its own advantages and use cases.

1. Using the <button> Tag with onclick (JavaScript)

This is a very common and direct method. You attach a JavaScript function call directly to the button's onclick event. The JavaScript code then modifies the browser's window.location property to navigate to the new page.

• How it works: When the button is clicked, the script inside onclick executes. window.location.href is set to the URL of the target page, causing the browser to load that page.
• Reference Inclusion: This method directly uses the <button> tag of HTML with the onclick attribute, as mentioned in the reference.
• Example Code:

<button onclick="window.location.href='target-page.html';">Go to Target Page</button>

• Variation (Using a Separate Function): For more complex scenarios or better code organization, you can define a separate JavaScript function and call it from onclick.

<button onclick="redirectToPage();">Go to Target Page</button>

<script>
function redirectToPage() {
  window.location.href = 'target-page.html'; // Redirects to target-page.html
  // Or use window.location.replace('target-page.html'); // Replaces history entry
}
</script>

2. Using the <button> Tag Inside <form>

A button with type="submit" inside a <form> element can be used to navigate. While primarily for submitting data, a form submit without a specific backend handler can simply navigate the browser to the URL specified in the action or formaction attribute.

• How it works: Clicking a submit button within a form triggers the form submission process. If no specific submission handling prevents it, the browser will navigate to the URL specified in the form's action attribute or the button's formaction attribute.
• Reference Inclusion: This uses the <button> tag inside <form> tags with the action or formaction attribute, as described in the reference.
• Example Code:

<form action="target-page.html">
  <button type="submit">Go to Target Page (via Form)</button>
</form>

<!-- Or using formaction on the button -->
<form>
    <button type="submit" formaction="another-target-page.html">Go to Another Page (via formaction)</button>
</form>

3. Using the <a> Tag Styled as a Button

Although not strictly a <button> tag, an anchor (<a>) tag is semantically for navigation and can be styled to look exactly like a button using CSS. This is often preferred for pure navigation links.

• How it works: The href attribute of the <a> tag contains the URL to navigate to. Browsers are designed to follow href links directly. CSS is used to change its appearance from an underlined text link to a button.
• Reference Inclusion: The reference explicitly mentions using the <a> tag using the href attribute as a method for page navigation.
• Example Code:

<a href="target-page.html" class="button-style">Go to Target Page (Styled Link)</a>

<style>
.button-style {
  display: inline-block; /* Makes it behave like a block element for padding/margins */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none; /* Removes underline */
  border: none;
  border-radius: 5px;
  cursor: pointer; /* Shows hand cursor on hover */
  text-align: center;
  /* Add hover/active styles as needed */
}
</style>

4. Using a Dedicated JavaScript Function

As touched upon in method 1, you can use a dedicated JavaScript function triggered by the button's onclick event or by adding an event listener. This method encapsulates the redirection logic, making your HTML cleaner and JavaScript more modular.

• How it works: A function containing window.location.href = '...' (or window.location.replace(...)) is called when the button is clicked.
• Reference Inclusion: The reference mentions using a JavaScript function to take the current page to another web page.
• Example Code:

<button id="myRedirectButton">Go to Target Page (JS Function)</button>

<script>
  document.getElementById('myRedirectButton').onclick = function() {
    window.location.href = 'target-page.html'; // Redirect logic inside a function
  };
  // Or using addEventListener (recommended for multiple listeners)
  // document.getElementById('myRedirectButton').addEventListener('click', function() {
  //   window.location.href = 'target-page.html';
  // });
</script>

Summary of Methods

Here's a quick overview of the discussed methods:

Choosing the best method depends on your specific needs. For simple navigation that looks like a button, a styled <a> is often semantically correct. For triggering actions possibly involving JavaScript logic before redirecting, the onclick or dedicated JS function method is suitable. Using a button inside a form is primarily for scenarios involving data submission before redirection.