如何创建像链接一样的HTML按钮？

如何创建像链接一样的HTML按钮？因此，单击该按钮可将用户重定向到页面。

我希望它是可访问的，并且在URL中使用最少的额外字符或参数。

当前回答

您可以简单地在元素周围放置标记：

<a href="http://google.com" target="_blank">
    <button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

2017-01-16 04:24:49

其他回答

我知道已经提交了很多答案，但似乎没有一个能真正解决问题。以下是我对解决方案的看法：

使用OP开头的<form method=“get”>方法。这非常有效，但有时会附加一个？到URL。这个是主要问题。此解决方案在不启用JavaScript的情况下工作。回退将添加？到URL的结尾。如果启用了JavaScript，那么您可以使用jQuery/JavaScript来处理以下链接，这样吗？不会最终附加到URL。对于极少数未启用JavaScript的用户，它将无缝地回退到＜form＞方法。JavaScript代码使用事件委托，因此您可以在＜form＞或＜button＞存在之前附加一个事件监听器。我在这个例子中使用jQuery，因为它既快速又简单，但也可以用“香草”JavaScript实现。JavaScript代码防止发生默认操作，然后遵循<form>action属性中给出的链接。

JSBin示例（代码段不能跟随链接）

//使用“link”类侦听文档中某个元素的任何单击$（document）.on（'click'，'.link'，函数（e）{//阻止默认操作（例如提交表单）e.预防违约（）；//获取表单中指定的URLvar url=e.target.parentElement.action；window.location=url；});<!DOCTYPE html><html><head><script src=“https://code.jquery.com/jquery-1.11.1.min.js“></script><meta charset=“utf-8”><title>表单按钮作为链接</title></head><body><form method=“get”action=“http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">的按钮<button type=“submit”class=“link”role=“link”>链接</button></form></body></html>

2015-05-05 22:58:30

实现这一点的唯一方法（除了BalusC巧妙的表单想法！）是向按钮添加JavaScript onclick事件，这对可访问性不利。

您是否考虑过将普通链接设置为按钮样式？你不能用这种方式实现特定于操作系统的按钮，但这仍然是最好的IMO方式。

2010-05-25 16:41:43

HTML回答：如果您想创建一个HTML按钮，该按钮的作用类似于链接，请使用两个常用属性：<a>和/或action=“”：

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

或

“href”是<a>属性的一部分。它有助于直接链接：

2021-02-19 18:19:14

从HTML5开始，按钮支持formaction属性。最重要的是，不需要JavaScript或诡计。

<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出！</button></form>

注意事项

必须由<form>标记包围。＜button＞类型必须是“submit”（或未指定）-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说，如果在另一个表单中执行此操作，将导致冲突。

参考：formaction

浏览器支持：＜button＞：button元素

2015-07-02 19:03:46

您可以简单地在元素周围放置标记：

<a href="http://google.com" target="_blank">
    <button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

2017-01-16 04:24:49

如何创建像链接一样的HTML按钮？

推荐文章

最新文章

标签