如何创建一个像链接一样的HTML按钮？

Question

更多

资料来源非AMP版本编辑

我想创建一个HTML按钮，它的作用就像一个链接。因此，当你点击这个按钮时，它会重定向到一个页面。我希望它能尽可能的无障碍。

我还希望它在URL中没有任何额外的字符或参数。

我怎样才能做到这一点？

根据到目前为止发布的答案，我目前正在这样做。

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

但问题是，在Safari和Internet Explorer中，它在URL的末尾添加了一个问号字符。我需要找到一个解决方案，不在URL的末尾添加任何字符。

有两个其他的解决方案可以做到这一点。使用JavaScript或将一个链接样式化，使其看起来像一个按钮。

使用JavaScript。

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

但这显然需要JavaScript，因此对屏幕阅读器来说，它不太容易访问。链接的意义在于转到另一个页面。因此，试图让一个按钮像一个链接一样行事是错误的解决方案。我的建议是，你应该使用一个链接，并把它设计成一个按钮的样子。

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

编程

button html hyperlink anchor htmlbutton

25日五月 2010 в 4:39

45 种观点

资料来源非AMP版本编辑


    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">

25

0

资料来源非AMP版本编辑

唯一的方法（除了BalusC巧妙的形式想法！）是给按钮添加一个JavaScriptonclick事件，这对可访问性是不利的。

你有没有考虑过把一个普通的链接设计得像一个按钮？你不能通过这种方式实现操作系统特定的按钮，但这仍然是最好的方法。

16

0

BalusC · Accepted Answer · 2010-05-25T16:40:49+00:00

HTML

普通的HTML方法是把它放在一个`中，在action`属性中指定所需的目标URL。


    <input type="submit" value="Go to Google" />

如果有必要，在表单上设置CSS display: inline;，使其与周围的文本保持一致。在上面的例子中，你可以用<input type="submit">来代替。唯一的区别是，``元素允许有孩子。

你会直观地期望能够使用`类似于`元素，但不幸的是没有，根据 HTML规范，这个属性并不存在。

如果允许使用CSS，只需使用一个<a>，利用appearance属性（只有Internet Explorer的支持目前（2015年7月）仍然很差）将其样式化为一个按钮。

<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，请设置window.location.href。

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