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

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


当前回答

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

使用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><!-- 将“action”设置为按钮要转到的URL--><form method=“get”action=“http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"><!-- 将类“link”添加到事件侦听器-->的按钮<button type=“submit”class=“link”role=“link”>链接</button></form></body></html>

其他回答

这里的所有解决方案都不适合我,所以在尝试了所有解决方案之后,我得到了一些微不足道的东西:仅HTML(无表单提交),无CSS,无JS:

<a href="/link"><button>Link</button></a>

使用<a>标记创建一个按钮并添加适当的CSS内容:

.邻接{背景:#bada55;填充:5px;边界半径:5px;过渡:1s;文本装饰:无;颜色:黑色;}.attatton:悬停{background:#2a2;}<a href=“https://example.com“class=”abutton“>继续</a>

如果您使用的是SSL证书:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

如果您想创建一个充当链接的按钮,有多种方法可以实现。选择最适合您情况的。下面的代码在按钮内创建一个链接。

<按钮><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>

有很多方法可以做到这一点,但这只是按钮的三个小例子,它们起到了链接的作用。换句话说,打开链接的按钮。

创建一个充当链接的按钮是HTML设计者需要考虑的一项要求。最被接受的答案是使用表单中的按钮,不幸的是,有时只会在当前窗口中加载新链接-如果这是在电子邮件中,情况会很糟糕。

其他人提出JS、Bootstraps、CSS Styles等可能不可用或不允许。假设一个用例像电子邮件中的一个链接来确认它,并且你没有一个设计完整的基于html的电子邮件模板。您可以简单地使用链接,但添加一些内联样式,如下所示:

$htmlLink = 'https://stackoverflow.com/questions/2906582/';
"<a target='_blank' href='". $htmlLink ."' style='color: purple; font-size: 24px; font-weight: bold; border:2px purple solid; text-decoration: none;'>View This Answer</a>"

引号已经设置好,如果要在电子邮件标记中作为一行,可以在两端用点(.)连接。这只会使文本变大,周围有边框;不是很好,但保证不会像前面所说的那样加载页面。在解析文本和变量时假设Php。