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

我想创建一个类似于链接的 HTML 按钮。因此,当您单击按钮时,它将重定向到页面。我希望它尽可能地易于访问。

我也希望这样做,因此 URL 中没有任何多余的字符或参数。

我该如何实现?


根据到目前为止发布的答案,我目前正在这样做:

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

但这是在SafariInternet 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/