如何创建一个HTML按钮就像一个链接？ [英] How to create an HTML button that acts like a link?
问题描述
我想创建一个HTML按钮就像一个链接。所以，当你按一下按钮，它重定向到一个页面。我希望它尽可能接近。
我也想这么没有任何多余的字符，或URL参数。
我怎样才能做到这一点？
基于迄今为止公布的答案
，我目前这样做：
＆LT;形式方法=获得行动=/第2页＆GT;
＆LT;按钮式=提交＆GT;继续＆LT; /按钮＆GT;
＆LT; /表及GT;
但这样做的问题是，在 Safari浏览器并的Internet Explorer ，它增加了一个问号字符的URL的末尾。我需要找到一个不任何字符添加到URL末尾的解决方案。
有其他两个解决办法：使用JavaScript或样式的链接，看起来像一个按钮
使用JavaScript：
＆LT;按钮的onclick =window.location.href ='/ 2页'＆GT;继续＆LT; /按钮＆GT;
不过，这显然需要JavaScript，因为这个原因，它是屏幕阅读器不易进入。链接点是去到另一个页面。因此，试图使像一个链接按钮的行为是错误的解决方案。我的建议是你应该使用一个链接，它的样式看起来像一个按钮。
＆LT; A HREF =/链接/到/ 2页＆GT;继续＆LT; / A＆GT;
HTML
纯HTML的方法就是把它放在一个＆LT;形式＆GT; ，其中指定了行动所需的目标网址属性。
＆LT;形式的行动=http://google.com＆GT;
＆LT;输入类型=提交值=转到谷歌/＆GT;
＆LT; /表及GT;
如果必要，设置CSS 显示：内联; 在表格上，以保持它与周围的文本流。取而代之的＆LT;输入类型=提交＆GT; 在上面的例子中，你也可以使用＆LT;按钮式=提交＆GT; 。唯一的区别是，＆LT;按钮方式＆gt; 元素可以让孩子
您想直观地希望能够使用＆LT;按钮HREF =http://google.com＆GT; 类似的＆LT; A＆GT; 元素，但遗憾的是没有，这个属性不按的 HTML规范。
的CSS
如果CSS是允许的，只需使用＆LT; A＆GT; 来看看你的风格喜欢用在其他中的 外观 财产（的only互联网＆NBSP;浏览器支持目前（2015年7月）依然不佳）
＆LT; A HREF =http://google.com级=按钮＆GT;转到谷歌＆LT; / A＆GT;
a.button {
-webkit-外观：按钮;
-moz-外观：按钮;
外观：按钮; 文字修饰：无;
颜色：最初的;
}
或者挑选像许多CSS库之一引导。
＆LT; A HREF =http://google.com级=BTN BTN-默认＆GT;转到谷歌＆LT; / A＆GT;
的JavaScript
如果JavaScript是允许的，将 window.location.href 。
＆LT;输入类型=按钮的onclick =location.href =的http：//google.com';值=转到谷歌/＆GT;
I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.
I would also like it so there aren't any extra characters, or parameters in the URL.
How can I achieve this?
Based on the answers posted so far, I am currently doing this:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.
There are two other solutions to this: using JavaScript or styling a link to look like a button.
Using JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.
<a href="/link/to/page2">Continue</a>
HTML
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.
You'd intuitively expect to be able to use <button href="http://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only Internet Explorer support is currently (July 2015) still poor).
<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;
}
Or pick one of those many CSS libraries like Bootstrap.
<a href="http://google.com" class="btn btn-default">Go to Google</a>
JavaScript
If JavaScript is allowed, set the window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
这篇关于如何创建一个HTML按钮就像一个链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
