如何创建一个类似链接的HTML按钮?

时间 2010-05-26
阅读 4821240
点赞 1499
收藏 368
连接andrew

我想创建一个HTML按钮,其作用类似于链接。所以,当你点击这个按钮时,它会重定向到一个页面。我希望它尽可能的方便。

我也希望这样,在URL中没有任何额外的字符或参数。

我怎样才能做到这一点?


根据目前发布的答案,我目前正在进行以下操作:

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

但问题是SafariInternet Explorer,它在URL结尾添加问号字符。我需要找到一个不在URL末尾添加任何字符的解决方案。

还有另外两种解决方案可以做到这一点:使用javascript或设计链接的样式,使其看起来像一个按钮。

使用javascript:

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

但这显然需要JavaScript,因此屏幕阅读器无法访问它。链接的目的是转到另一页。因此,试图让按钮像链接一样工作是错误的解决方案。我的建议是你应该使用一个链接style it to look like a button.

<a href="/link/to/page2">Continue</a>
✅ 被采纳的答案

HTML

简单的HTML方法是将它放在<form>其中,您在action属性。

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

如有必要,设置CSSdisplay: inline;在窗体上使其与周围文本保持一致。而不是<input type="submit">在上面的示例中,您还可以使用<button type="submit">. 唯一的区别是<button>元素允许子级。

你会凭直觉期望能够使用<button href="http://google.com">类似于<a>元素,但不幸的是不存在,根据HTML specification.

CSS

如果允许使用CSS,只需使用<a>它看起来像一个按钮appearance财产(only Internet Explorer support is currently (July 2015) still poor

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

或者选择许多CSS库中的一个Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

如果允许使用javascript,请设置window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
👍 1699