如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
从HTML5开始,按钮支持formaction属性。最重要的是,不需要JavaScript或诡计。
<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出!</button></form>
注意事项
必须由<form>标记包围。<button>类型必须是“submit”(或未指定)-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说,如果在另一个表单中执行此操作,将导致冲突。
参考:formaction
浏览器支持:<button>:button元素
其他回答
另一个选项是在按钮中创建链接:
<button type="button"><a href="yourlink.com">Link link</a></button>
然后使用CSS来设置链接和按钮的样式,使链接占据按钮内的全部空间(这样用户就不会错过点击):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。
您还可以将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中测试过它。
我在一个我目前正在开发的网站上使用了这个,效果很好!如果你也想要一些很酷的样式,我会把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在这里。
如果您想创建一个充当链接的按钮,有多种方法可以实现。选择最适合您情况的。下面的代码在按钮内创建一个链接。
<按钮><a href=“www.google.com”>转到谷歌</a></按钮>
第二种方法是在单击按钮时打开一个新窗口
<button onclick=“open('ww.google.com')”>google</button>
或者添加事件侦听器
document.querySelector(“#btn”).addEventListener('click',打开('ww.google.com'))<button id=“btn”>转到Google</button>
有很多方法可以做到这一点,但这只是按钮的三个小例子,它们起到了链接的作用。换句话说,打开链接的按钮。
<form>
<input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'">
</form>