小编典典

如何创建充当链接的HTML按钮?

php

我想创建一个类似于链接的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>

阅读 543

收藏
2020-05-13

共1个答案

小编典典

HTML
纯HTML方式是将其放在

,您可以在其中指定所需的目标URL action。

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

如有必要,请display: inline;在表单上设置CSS ,以使其与周围的文本保持一致。除了<input type="submit">上面的示例,您还可以使用<button type="submit">。唯一的区别是该<button>元素允许孩子。

直观上,您希望能够使用<button href="https://google.com"><a>元素类似的元素,但不幸的是,根据HTML规范,此属性不存在。

CSS

如果允许使用CSS,则只需使用<a>您设置的样式即可看起来像按钮,并使用appearance属性(仅Internet Explorer不支持)。

<a href="https://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="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

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

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

除了<input type="button">上面的示例,您还可以使用<button>。唯一的区别是该<button>元素允许孩子。

2020-05-13