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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

纯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，则只需使用<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，请设置window.location.href。

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

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

以上是 如何创建充当链接的HTML按钮？ 的全部内容， 来源链接： utcz.com/qa/412216.html

回到顶部