题 如何创建一个像链接一样的HTML按钮?


我想创建一个像按钮一样的HTML按钮。因此,当您单击该按钮时,它会重定向到页面。我希望它尽可能地易于访问。

我也喜欢它,所以URL中没有任何额外的字符或参数。

我怎样才能做到这一点?


根据到目前为止发布的答案,我目前正在这样做:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

但问题在于 苹果浏览器 和 IE浏览器,它在URL的末尾添加了一个问号字符。我需要找到一个不会在URL末尾添加任何字符的解决方案。

还有另外两种解决方案:使用JavaScript或样式化链接看起来像一个按钮。

使用JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

但这显然需要JavaScript,因此屏幕阅读器不易访问。链接的要点是转到另一个页面。因此,尝试使按钮像链接一样是错误的解决方案。我的建议是你应该使用链接和 它看起来像一个按钮

<a href="/link/to/page2">Continue</a>

1374
2018-05-25 16:39


起源


将GET更改为POST。似乎没有人解决OP的第一个问题,即问题 ? 在URL上。这是由形式造成的 type="GET",改成这个 type="POST" 和 ? 在URL的末尾消失。这是因为GET发送URL中的所有变量,因此 ?。 - redfox05
@ redfox05这适用于您不严格接受页面接受方法的上下文。在您拒绝期望的页面上的帖子的上下文中 GET 它会失败。我仍然认为使用链接是有道理的,它会像按钮那样活跃时不会对“空格键”做出反应。一些风格和行为也会有所不同(例如可拖动)。如果您想要真正的“按钮链接”体验,请让服务器端重定向以完成URL ? 删除它可能也是一种选择。 - Nicolas Bouvrette
cssbuttongenerator.com 如果你想用css创建一个按钮,可能会派上用场。 - snow
我认为创建一个看起来像按钮的链接会更好 - yasar


答案:


HTML

简单的HTML方式就是把它放在一个 <form> 其中您在中指定所需的目标URL action 属性。

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

如有必要,请设置CSS display: inline; 在表单上保持它与周围文本的流程。代替 <input type="submit"> 在上面的例子中,您也可以使用 <button type="submit">。唯一的区别是 <button> 元素允许孩子。

您可以直观地期望能够使用 <button href="http://google.com"> 类似于 <a> 元素,但不幸的是,这个属性根据不存在 HTML规范

CSS

如果允许CSS,只需使用 <a> 你使用其中的样式看起来像一个按钮 appearance 财产(目前只有Internet Explorer支持(2015年7月)仍然很差)。

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

或者选择其中一个像CSS这样的CSS库 引导

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript的

如果允许JavaScript,请设置 window.location.href

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1585
2018-05-25 16:40



简单又好看。一个好的解决方案加 display: inline 在表单中保持按钮在流程中。 - Pekka 웃
在safari中,这会在url的末尾添加一个问号...是否有办法不对URL添加任何内容? - Andrew
@BalusC很好的解决方案,但如果它在其他形式(父窗体)内,则按此按钮会重定向到父窗体的动作属性中的地址。 - Vladimir
是仅仅是我还是<button>标签缺少明显的href属性?
看起来简单而美观,但如果考虑不当可能会产生副作用。即在页面中创建第二个表单,嵌套表单等。 - Tejasvi Hegde


<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

409
2018-05-25 16:44



@pinouchon应该工作。窗口暗示。可能是IE9的bug, stackoverflow.com/questions/7690645/... - Adam
似乎如果你没有指定type =“button”,这将不会一直有效。看起来该按钮将默认为“提交” - kenitech
如果要在新窗口/选项卡中打开链接,请使用:onclick =“window.open('example.com”, '_空白');”; - bennos
@kenitech 根据规格,这是正确的:“ 缺失值默认值 是个 提交按钮 州。” - Niels Keurentjes
但是用户无法右键单击在新选项卡中打开,为了工作,您需要锚标记 - Irshu


如果它是您在基本HTML锚标记中寻找的按钮的视觉外观,那么您可以使用 Twitter Bootstrap 用于格式化以下任何常见HTML类型链接/按钮以显示为按钮的框架。请注意框架的第2版,第3版或第4版之间的视觉差异:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap(v4) 样品外观:

Sample output of Boostrap v4 buttons

Bootstrap(v3) 样品外观:

Sample output of Boostrap v3 buttons

引导程序(v2) 样品外观:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



造型单个按钮似乎有点矫枉过正,不是吗?使用边框,填充,背景和其他CSS效果,您可以将按钮和链接样式设置为类似,而无需引入整个框架。 Bootstrap使用的方法很好,但使用Bootstrap似乎过多。 - scottkellum
已经在我的项目中使用Twitter Bootstrap,所以这个答案对我来说是完美的 - Craig Howard
这是现在最好的答案。 - arame3333


使用:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

遗憾的是,此标记在HTML5中不再有效,并且既不会验证也不会始终按预期工作。使用另一种方法。


130
2018-05-25 16:42



不(X)HTML验证。 - BalusC
@BalusC: 也没有 这个 页 - Robert Harvey♦
@Rob:那不是我的问题:)把它扔到Meta看看。但是,那 target 属性是imo的边缘。 - BalusC
在IE8中不起作用(标准模式) - Pieter Kuijpers


从HTML5开始,按钮支持 formaction 属性。最重要的是,不需要Javascript或欺骗。

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

注意事项

  • 必须被包围 <form> 标签。
  • <button> 类型必须是“提交”(或未指定),我无法使用类型“按钮”。这提出了以下几点。
  • 覆盖表单中的默认操作。换句话说,如果你在另一个表单中执行此操作,则会导致冲突。

参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction 浏览器支持: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



只是为了完成信息: formaction 兼容,因为“IE世界“自版本 10 以上 - Luca Detomi
@LucaDetomi - 这是正确的,但它是HTML5特定的。我添加了另一个支持数据链接。 - EternalHour
@EternalHour真正的好奇。在你和我提供的例子中,这两种形式的行为应该有明显的区别吗?在这种具体情况下呢 <button formaction> === <form action>? - pseudosavant
@pseudosavant - 区别在于您的答案依赖于Javascript才能工作。在这个解决方案中,不需要Javascript,它是直接的HTML。 - EternalHour
有用的是要注意,这仅在由表单标记包装时才有效。发现困难的方式...... - Adsy2010


它非常简单,不使用任何表格元素。您可以使用带有按钮的<a>标签:)。

喜欢这个:

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

它会将href加载到同一页面中。想要一个新页面?只是用 target="_blank"


41
2018-02-11 15:29



虽然这有效,但它不应被视为解决方案而是一种解决方法,因为如果您通过W3C验证器传递此代码,则会出现错误。 - Hyder B.
是的,Hyder B.你是对的,但你应该记住,标准只是原始指南。作为一名程序员,你应该总是在盒子外面思考并尝试本书中没有的东西;)。 - Lucian Minea


如果您使用的是内部表单,请添加该属性 类型=“复位” 以及按钮元素。它会阻止表单操作。

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

35
2018-01-24 06:59