协慌网

我想创建一个像按钮一样的 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

纯 HTML 方式是将其放在<form>其中您在action属性中指定所需的目标 URL。

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

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

您可以直观地期望能够使用与<a>元素类似的<button href="http://google.com"> ，但遗憾的是，根据HTML 规范 ，此属性不存在。

CSS

如果允许使用 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;
}

或者选择其中一个像Bootstrap这样的 CSS 库。

<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" />

<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

如果它是您在基本 HTML 锚标记中寻找的按钮的视觉外观，那么您可以使用Twitter Bootstrap框架格式化以下任何常见的 HTML 类型链接 / 按钮以显示为按钮。请注意框架的第 2 版，第 3 版或第 4 版之间的视觉差异：

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap（v4）样本外观：

Bootstrap（v3）样本外观：

Bootstrap（v2）样本外观：