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

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


当前回答

如果你需要的是它看起来像一个按钮,重点放在渐变图像上,你可以这样做:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

其他回答

您还可以将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中测试过它。

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

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

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

创建一个充当链接的按钮是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。

另一个选项是在按钮中创建链接:

<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;}

我在这里创建了一个演示。

请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。