如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
如果你需要的是它看起来像一个按钮,重点放在渐变图像上,你可以这样做:
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
其他回答
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。
<form>
<input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'">
</form>
我在一个我目前正在开发的网站上使用了这个,效果很好!如果你也想要一些很酷的样式,我会把CSS放在这里。
输入[类型=“提交”]{背景色:白色;宽度:200px;边框:3px实心#c9c9c9;字体大小:24pt;边距:5px;颜色:#969696;}input[type=“submit”]:悬停{颜色:白色;背景色:#969696;过渡:颜色0.2s 0.05s容易;过渡:背景色0.2s 0.05s轻松;光标:指针;}<input type=“submit”name=“submit”onClick=“window.location=”http://example.com'">
一个正在工作的JSFiddle在这里。
在浏览器控制台中键入window.location并按Enter键。然后,您可以清楚地知道位置包含:
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-
that-acts-like-a-link"
origin: "https://stackoverflow.com"
pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
port: ""
protocol: "https:"
您可以从这里设置任何值。
因此,对于重定向另一个页面,可以使用链接设置href值。
window.location.href = your link
在您的案例中:
<button onclick="window.location.href='www.google.com'">Google</button>
您还可以将buttons类型属性设置为“button”(它使其不提交表单),然后将其嵌套在链接中(使其重定向用户)。
这样,如果需要,您可以在同一表单中有另一个按钮来提交表单。我还认为,在大多数情况下,这比将表单方法和动作设置为链接更可取(除非我猜是搜索表单…)
例子:
<form method=“POST”action=“/SomePath”><input type=“text”name=“somefield”/><a href=“www.target.com”><button type=“button”>转到目标</按钮></a><button type=“submit”>提交表单</button></form>
这样,第一个按钮重定向用户,而第二个按钮提交表单。
小心确保按钮不会触发任何动作,否则会导致冲突。同样,正如Arius所指出的,您应该意识到,出于上述原因,根据标准,严格来说,这并不是有效的HTML。不过,它在Firefox和Chrome中确实可以正常工作,但我还没有在Internet Explorer中测试过它。