我想创建一个类似于链接的 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 方式是将其放在<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,则只需使用<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,则设置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)示例外观:
Bootstrap(v3)示例外观:
Bootstrap(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>
这个问题似乎有三种解决方案(各有利弊)。
<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 服务器和堆栈。因此,此方法总结如下:
优点:
缺点:
?
在某些浏览器中看起来很难看。可以通过使用 POST 而不是 GET 的黑客(在某些情况下)解决此问题,但是干净的方法是进行服务器端重定向。服务器端重定向的缺点是,由于 304 重定向,将导致这些链接的额外 HTTP 调用。 <form>
元素您可以使用 JavaScript 触发 onclick 和其他事件,以使用按钮模仿链接的行为。下面的示例可以改进,也可以从 HTML 中删除,但是这里只是为了说明这一点:
<button onclick="window.location.href='/page2'">Continue</button>
优点:
缺点:
像按钮一样设计链接的样式相对容易,并且可以在不同的浏览器中提供类似的体验。 Bootstrap 可以做到这一点,但是使用简单的样式也可以很容易地自己实现。
优点:
<form>
即可工作。 缺点:
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>