如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

我希望它是可访问的,并且在URL中使用最少的额外字符或参数。


当前回答

您可以简单地在元素周围放置标记:

<a href="http://google.com" target="_blank">
    <button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

其他回答

我知道已经提交了很多答案,但似乎没有一个能真正解决问题。以下是我对解决方案的看法:

使用OP开头的<form method=“get”>方法。这非常有效,但有时会附加一个?到URL。这个是主要问题。此解决方案在不启用JavaScript的情况下工作。回退将添加?到URL的结尾。如果启用了JavaScript,那么您可以使用jQuery/JavaScript来处理以下链接,这样吗?不会最终附加到URL。对于极少数未启用JavaScript的用户,它将无缝地回退到<form>方法。JavaScript代码使用事件委托,因此您可以在<form>或<button>存在之前附加一个事件监听器。我在这个例子中使用jQuery,因为它既快速又简单,但也可以用“香草”JavaScript实现。JavaScript代码防止发生默认操作,然后遵循<form>action属性中给出的链接。

JSBin示例(代码段不能跟随链接)

//使用“link”类侦听文档中某个元素的任何单击$(document).on('click','.link',函数(e){//阻止默认操作(例如提交表单)e.预防违约();//获取表单中指定的URLvar 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>表单按钮作为链接</title></head><body><!-- 将“action”设置为按钮要转到的URL--><form method=“get”action=“http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"><!-- 将类“link”添加到事件侦听器-->的按钮<button type=“submit”class=“link”role=“link”>链接</button></form></body></html>

还可以使用按钮:

例如,在ASP.NET Core语法中:

// 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>

Use:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

不幸的是,这种标记在HTML5中不再有效,既不能验证,也不能始终按预期工作。使用另一种方法。

如果您在基本HTML锚标记中查找的是按钮的视觉外观,那么您可以使用Twitter Bootstrap框架将以下任何常见HTML类型的链接/按钮格式化为按钮。请注意框架版本2、3或4之间的视觉差异:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

引导(v4)示例外观:

引导(v3)示例外观:

引导(v2)示例外观:

它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。

这样地:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。

EDIT

几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。