如何创建充当链接的 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>

答案

的 HTML

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

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

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

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

的 CSS

如果允许使用 CSS，则只需使用<a>即可设置外观，使其看起来像一个按钮，并使用appearance属性（ 仅当前（2015 年 7 月）对 Internet Explorer 的支持仍然很差 ）。 

<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

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

请注意， type="button"属性很重要，因为它的缺失值默认为 Submit Button state 。

如果这是您在基本 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）示例外观：

Boostrap v4按钮的样本输出

Bootstrap（v3）示例外观：

Boostrap v3按钮的样本输出

Bootstrap（v2）示例外观：

Boostrap v2按钮的样本输出

采用： 

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

不幸的是，此标记在 HTML5 中不再有效，并且既不会验证也不总是能够按预期工作。使用另一种方法。

从 HTML5 开始，按钮支持formaction属性。最好的是，不需要 Javascript 或技巧。 

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

注意事项

  • 必须用<form>标记包围。
  • <button>类型必须为 “提交”（或未指定），我无法使用 “button” 类型。这在下面提出了要点。
  • 覆盖表单中的默认操作。换句话说，如果您在另一种形式下执行此操作，则会引起冲突。

参考： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction浏览器支持： https : //developer.mozilla.org/en-US/docs/Web/ HTML / 元素 / 按钮＃浏览器兼容性

实际上，它非常简单，并且不使用任何表单元素。您可以只在 标记内使用一个按钮：)。

像这样： 

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

它将把 href 加载到同一页面。想要一个新页面？只需使用target="_blank" 。

编辑

几年后，尽管我的解决方案仍然有效，但请记住，您可以使用很多 CSS 使其外观如您所愿。这只是一种快速的方法。

如果使用内部表单，请添加属性type =“reset”和 button 元素。它将阻止表单动作。 

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

这个问题似乎有三种解决方案（各有利弊）。

解决方案 1：以表格形式单击。 

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

但这是在某些版本的流行浏览器（例如 Chrome，Safari 和 Internet Explorer）中，它在 URL 的末尾添加了问号字符。因此，换句话说，URL 上方的代码将最终看起来像这样： 

http://someserver/pages2?

有一种解决方法，但需要服务器端配置。使用Apache Mod_rewrite 的一个示例是使用尾随的重定向所有请求?到对应的网址，不带? 。下面是使用的. htaccess 的例子，但有一个完整的线程在这里 ： 

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能会有所不同，具体取决于所使用的 Web 服务器和堆栈。因此，此方法总结如下：

优点：

  1. 这是一个真正的按钮，从语义上讲是有意义的。
  2. 由于它是一个真实的按钮，因此它也将像真实的按钮一样起作用（例如，在活动状态下按下空格键时可拖动行为和 / 或模仿点击）。
  3. 无需 JavaScript，无需复杂的样式。

缺点：

  1. 尾随?在某些浏览器中看起来很难看。可以通过使用 POST 而不是 GET 的黑客（在某些情况下）解决此问题，但是干净的方法是进行服务器端重定向。服务器端重定向的缺点是，由于 304 重定向，将导致这些链接的额外 HTTP 调用。
  2. 添加额外的<form>元素
  3. 使用多种形式时，元素定位可能很棘手，并且在处理响应式设计时会变得更糟。根据元素的顺序，使用此解决方案无法实现某些布局。如果设计受到这一挑战的影响，最终可能会影响可用性。

解决方案 2：使用 JavaScript。

您可以使用 JavaScript 触发 onclick 和其他事件，以使用按钮模仿链接的行为。下面的示例可以改进，也可以从 HTML 中删除，但是这里只是为了说明这一点： 

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

优点：

  1. 简单（满足基本要求）并保留语义，而无需其他形式。
  2. 由于它是一个真实的按钮，因此它也将像真实的按钮一样起作用（例如，在活动状态下按下空格键时可拖动行为和 / 或模仿点击）。

缺点：

  1. 需要 JavaScript，这意味着访问性较差。这对于诸如链接之类的基础（核心）元素而言并不理想。

解决方案 3：锚（链接）的样式类似于按钮。

像按钮一样设计链接的样式相对容易，并且可以在不同的浏览器中提供类似的体验。 Bootstrap 可以做到这一点，但是使用简单的样式也可以很容易地自己实现。

优点：

  1. 简单（基本要求）和良好的跨浏览器支持。
  2. 不需要<form>即可工作。
  3. 不需要 JavaScript 即可工作。

缺点：

  1. 语义有些破损，因为您想要一个像按钮一样起作用的按钮，而不是像按钮一样起作用的链接。
  2. 它不会重现解决方案 1 的所有行为。它不支持与按钮相同的行为。例如，链接在拖动时会有不同的反应。同样，如果没有一些额外的 JavaScript 代码，“空格键” 链接触发器将无法工作。由于浏览器在如何支持按钮上的keypress事件方面不一致，因此会增加很多复杂性。

结论

解决方案 1（ 表单中的按钮 ）对于需要最少工作的用户来说似乎是最透明的。如果您的布局不受此选择的影响，并且服务器端的调整是可行的，那么对于可访问性是头等大事（例如，错误页面上的链接或错误消息）的情况，这是一个不错的选择。

如果 JavaScript 不妨碍您的可访问性要求，则解决方案＃2（ JavaScript ）优于＃1 和＃3。

如果由于某种原因，可访问性至关重要（不是 JavaScript 的选择），但是您的设计和 / 或服务器配置使您无法使用选项＃1，则可以使用解决方案＃3（ 锚定样式类似于按钮 ）是解决此问题且对可用性影响最小的好选择。 

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

您可以简单地在元素周围放置一个标签： 

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/