我想创建一个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 href="http://google.com">
类似于<a>
元素,但不幸的是没有,根据HTML规范,这个属性并不存在。
如果允许使用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;
}
或者从那些众多的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" />
唯一的方法(除了BalusC巧妙的形式想法!)是给按钮添加一个JavaScriptonclick
事件,这对可访问性是不利的。
你有没有考虑过把一个普通的链接设计得像一个按钮?你不能通过这种方式实现操作系统特定的按钮,但这仍然是最好的方法。