Скачать или смотреть How to Create a Button with a Link in an HTML Form

Learn how to create a `button with link` using HTML forms and inputs, complete with step-by-step instructions and examples.
---
This video is based on the question https://stackoverflow.com/q/74439395/ asked by the user 'Yuki Hekmatyar' ( https://stackoverflow.com/u/20505394/ ) and on the answer https://stackoverflow.com/a/74439510/ provided by the user 'DotBased - Josh' ( https://stackoverflow.com/u/20505455/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I create a button with link using form and input?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Button with a Link in an HTML Form

In web development, you might find yourself wanting to create a button that not only submits a form but also serves as a link to another page. If you've ever faced challenges in achieving this, you're not alone! Today, we'll walk through the problem and provide a clear solution that involves a bit of HTML and JavaScript.

The Challenge: How to Add a Button with a Link

Here's a scenario: you want users to log in via a form while also providing them a quick way to access another page. Initially, you may have tried to use a submit input for the "Login" action along with a hyperlink, but this creates conflicts in form submission and presentation.

Your existing code might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Yet, this layout doesn't quite allow for a simultaneous link to another page.

The Solution: Using JavaScript to Enhance Functionality

To create a button that serves as both a form submitter and a link to another page, we will need to make some adjustments. Instead of using the conventional submit input, we can use a div styled as a button and leverage JavaScript for the submission.

Step-by-Step Implementation

Remove the Submit Input: First, we will eliminate the <input type="submit"> from your form.

Create a Div for the Button: This will be styled to look like a button but will contain JavaScript functionality to submit the form.

Include an Anchor Tag: Inside the div, you can also place an anchor tag (<a>) to serve as a link to another page.

Here's how the updated code would look:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Form Element: We use an ID (id="form") on the form to easily reference it in our JavaScript.

Div as Button: The <div> acts as our button. The onclick attribute triggers the form submission when the div is clicked.

Anchor Link: The <a> tag contains the URL for the page you want to link to. Click it to navigate, or you can incorporate more functionality as needed.

Final Thoughts

By adopting this approach, we create a user-friendly interface that allows users to log in while also providing access to other pages without the limitations of a standard submit button. If you require additional functionality or styling, you can enhance the JavaScript and CSS to suit your needs.

With these steps, you can effectively combine a button and link within your HTML forms and improve your web application's user experience!