How to create an HTML button that acts like a link-第5页回答

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

I would also like it so there aren't any extra characters, or parameters in the URL.

How can I achieve this?

Based on the answers posted so far, I am currently doing this:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.

There are two other solutions to do this: Using JavaScript or styling a link to look like a button.

Using JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.

<a href="/link/to/page2">Continue</a>

标签： html button hyperlink anchor htmlbutton

34条回答

弹指情弦暗扣

2楼-- · 2018-12-31 01:20

If you want to create a button that is used for a URL anywhere, create a button class for an anchor.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

0人赞添加讨论(0) 举报

不流泪的眼

3楼-- · 2018-12-31 01:20

In case you want the button to work as a download button

<a href="${link}" download><input type="button" id="btnDownload" value="Download Image"></input></a>

0人赞添加讨论(0) 举报

大哥的爱人

4楼-- · 2018-12-31 01:21

0人赞添加讨论(0) 举报

柔情千种

5楼-- · 2018-12-31 01:21

I know there have been a lot of answers submitted, but none of them seemed to really nail the problem. Here is my take at a solution:

Use the <form method="get"> method that the OP is starting with. This works really well, but it sometimes appends a ? to the URL. The ? is the main problem.
Use jQuery/JavaScript to do the link following when JavaScript is enabled so that ? doesn't end up appended to the URL. It will seamlessly fallback to the <form> method for the very small fraction of users who don't have JavaScript enabled.
The JavaScript code uses event delegation so you can attach an event listener before the <form> or <button> even exist. I'm using jQuery in this example, because it is quick and easy, but it can be done in 'vanilla' JavaScript as well.
The JavaScript code prevents the default action from happening and then follows the link given in the <form> action attribute.

JSBin Example (code snippet can't follow links)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

0人赞添加讨论(0) 举报

春风洒进眼中

6楼-- · 2018-12-31 01:21

Also you can use a button:

For example, in ASP.NET Core syntax:

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

0人赞添加讨论(0) 举报

皆成旧梦

7楼-- · 2018-12-31 01:23

0人赞添加讨论(0) 举报

How to create an HTML button that acts like a link

JSBin Example (code snippet can't follow links)

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间