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

小编典典

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

html

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

阅读 498

2020-05-10

共1个答案

小编典典

的HTML

纯HTML方式是将其放入<form>，您可以在其中指定所需的目标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-10