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

Question

我该如何创建一个像链接一样的HTML按钮？点击按钮时会将用户重定向到另一个页面。

我希望它易于访问，并且在URL中包含尽可能少的额外字符或参数。

- Andrew

---

将GET改为POST。似乎没有人解决楼主的第一个问题，即URL上的?符号。这是由于表单的类型是 type="GET"，将其改为 type="POST" 即可使URL末尾的 ? 消失。这是因为GET会将所有变量发送到URL中，因此会出现 ?。 - redfox05

在您不严格要求页面接受哪种方法的情况下，此方法可行。但如果您拒绝期望使用“GET”的页面上的帖子，它将失败。我仍然认为在链接上使用该方法是有意义的，但需要注意的是它不像按钮那样在激活时对“空格键”做出反应。此外，某些样式和行为也会有所不同（如可拖动）。如果您想要真正的“按钮链接”体验，可以通过服务器端重定向以删除以“？”结尾的URL。 - Nicolas Bouvrette

如果你想用CSS创建一个按钮，http://www.cssbuttongenerator.com/可能会很有用。 - snow

我认为最好创建一个看起来像按钮的链接。 - yasar

只是一个提示，对我来说，“按钮像链接一样运作”意味着我可以右键单击并决定是否在新标签页/窗口中打开，这在JS解决方案中无法实现... - Betlista

Answer 1

HTML

在HTML中，最简单的方法是将表单放在<form>标签中，并在action属性中指定所需的目标URL。

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

如果必要的话，可以在表单上设置CSS display: inline; 以使其与周围的文本保持同步。 在上面的示例中，可以使用<button type="submit">代替<input type="submit">。 唯一的区别是<button>元素允许子元素。你可能会直觉地期望能够使用类似于<a>元素的<button href="https://google.com">，但不幸的是，根据HTML规范，不存在此属性。如果允许使用CSS，则只需使用样式化成按钮的<a>元素，其中包括appearance属性（Internet Explorer不支持它）。

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

或者选择那些众多的CSS库，如Bootstrap。

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

JavaScript

如果允许使用 JavaScript，可以设置window.location.href。

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

在上面的例子中，你可以使用<button>代替<input type="button">。唯一的区别是<button>元素允许包含子元素。

- BalusC

---

简单而美好。一个好的解决方案。在表单中添加 display: inline 属性，以保持按钮在流布局中。 - Pekka

在Safari中，这将在URL末尾添加一个问号...有没有一种方法可以不向URL添加任何内容？ - Andrew

@BalusC 不错的解决方案，但如果它在其他表单（父表单）内部，则按下此按钮会重定向到父表单操作属性中的地址。 - Vladimir

只是我还是<button>标签明显缺少一个href属性？ - user1752532

看起来简单好看，但如果不考虑得当可能会产生副作用。例如在页面中创建第二个表单、嵌套表单等。 - Tejasvi Hegde

Answer 2

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

请注意，type="button"属性很重要，因为它的缺失值默认是提交按钮状态。

- Adam

---

如果你不指定 type="button"，似乎这个操作不总是有效。看起来按钮会默认为"submit"。 - kenitech

如果你想在新窗口/标签页中打开链接，请使用：onclick="window.open('http://www.example.com','_blank');" - bennos

根据规格说明（http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element），“缺少值默认情况”是指“提交按钮”状态。 - Niels Keurentjes

用户无法右键点击打开新标签页，要使此功能生效，需要使用锚标签。 - Irshu

请不要这样做。这会破坏许多东西，比如链接的右键菜单。 - Navin

Answer 3

如果你想在基本的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) 的样例外观：

Bootstrap (v3) 的样例外观：

Bootstrap (v2) 的样例外观：

- Bern

---

只为一个按钮设置样式，使用这么多的代码似乎有点过头了吧？通过添加边框、内边距、背景和其他 CSS 效果，你可以使按钮和链接的样式类似，而不需要整个框架。Bootstrap 使用的方法很好，但是使用 Bootstrap 似乎有点过度了。 - scottkellum

Answer 4

使用：

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

不幸的是，这种标记在HTML5中已经不再有效了，它将无法验证，也不一定总是按预期工作。 请使用其他方法。

- D'Arcy Rittich

---

根据HTML规范，此标记似乎在此时有效：https://w3c.github.io/html-reference/a.html#a-changes - JCollier

Answer 5

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

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

注意事项

• 必须被<form>标签包围。
• <button>类型必须为"submit"或未指定 - 我无法将其与类型"button"一起工作。这提出了下面的问题。
• 覆盖表单中的默认操作。换句话说，如果您在另一个表单内部执行此操作，它将引起冲突。

参考：formaction

浏览器支持：<button>：按钮元素

- EternalHour

---

补充一下信息：formaction 在“IE 世界”中兼容版本 10 及以上版本。 - Luca Detomi

@EternalHour 真的很好奇。在你和我提供的例子中，这两种形式的行为是否应该有明显的区别？在这种特定情况下，<button formaction> 是否等同于 <form action>？ - pseudosavant

你的答案依赖于JavaScript才能工作，而这个解决方案不需要JavaScript，它只使用纯HTML。 - EternalHour

@EternalHour 抱歉，我应该表述得更清楚。显然，我的JS使它与众不同，但它只是一种渐进式增强。即使没有JS，表单仍然会转到那个链接。我对我们每个示例中的HTML <form>的预期行为感到好奇。在一个button上使用formaction是否应该将?添加到空的GET提交中？在这个JSBin中，看起来HTML的行为对于两者都完全相同。 - pseudosavant

值得注意的是，这仅在被表单标签包装时起作用。我是通过艰难的方式发现这一点的... - Adsy2010

Answer 6

其实很简单，而且不需要使用任何表单元素。你可以只使用带有按钮的<a>标签 :).

就像这样：

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

它将在同一页面中加载 href。想要一个新页面？只需使用 target="_blank"。

编辑

几年后，虽然我的解决方案仍然有效，但请记住，您可以使用大量的 CSS 来使其看起来任何您想要的样子，这只是一种快速的方式。

- Lucian Minea

---

虽然这样做可以起到作用，但不应视为解决方案，而应视为一种变通方法，因为如果您将此代码通过W3C验证器，将会出现错误。 - Hyder B.

没错，Hyder B. 你说得对，但你也应该记住标准只是基本指南。作为程序员，你应该时刻开拓思路，尝试一些书上没有的东西 ;)。 - Lucian Minea

永远不要将其他锚点或表单操作元素包装成锚点。 - Roko C. Buljan

你应该使用<button type="button">...，这样它就不会默认作为提交按钮。 - Stephen R

这不是有效代码的原因非常明显：可访问性。 选项卡停靠点（例如链接）不应包含选项卡停靠点（例如按钮），因为辅助技术（屏幕阅读器等）不知道如何向用户呈现它们。问问自己：哪个通过选项卡获得键盘焦点？哪个应该处理单击事件？ 因此，除了未通过HTML验证器之外，您还将违反WCAG，这可能会产生法律后果-这是一个最好不要想得太远的盒子。 - brennanyoung

Answer 7

如果您使用的是内部表单，请在按钮元素中添加属性type="reset"。它将防止表单操作。

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

- saravanabawa

---

只有在你希望重置表单时才需要这样做。请使用 type="button"。 - Stephen R

唯一的问题是内联JS被认为是不好的形式，有时会违反CSP的规定。 - baash05

Answer 8

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

- ghoppe

---

@Robusto在那个曾经空着的地方发表了一条嘲讽性的评论 :) 在我看来，这不是一个好的解决方案，因为没有JavaScript它是行不通的。 - Pekka

@Pekka：是的，而且它甚至不是格式良好的XHTML。 - Sean Patrick Floyd

如果使用表单，只需使用提交功能；如果使用onclick，为什么还要麻烦地使用表单呢？-1 - NimChimpsky

它不是良好格式的HTML。标签“input”没有结束标签。 - Peter Mortensen

根据HTML规范，input元素是一个空元素，它必须有一个开始标签但不能有结束标签。 - ghoppe

Answer 9

你可以简单地在元素周围放置一个标签：

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

https://jsfiddle.net/hj6gob8b/

- Uriahs Victor

---

不行，HTML不允许在<a>元素中嵌套<button>元素。 - Quentin

这基本上与早些年的这个答案相同。 - Quentin

如果它被禁止了，那为什么它还能运作呢？ :) 没有认真的开发人员会听从W3C验证器所说的一切...试着将Facebook或Google或其他大型网站通过W3C验证器...网络并不等待任何人。 - Uriahs Victor

今天或许可以用，但是未来浏览器供应商可能会决定更改这种行为，因为它并不合法。 - Jacob

Flash和Java小程序也很常见。 - Jacob

Answer 10

这个问题似乎有三种解决方案（每一种都有优缺点）。

解决方案1：按钮在表单中。

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

但是这种方法存在问题，因为在一些流行的浏览器版本（如 Chrome、Safari 和 Internet Explorer）中，它会在 URL 末尾添加一个问号字符。换句话说，对于上面的代码，你的 URL 最终看起来会像这样:

http://someserver/pages2?

有一种解决方法，但需要在服务器端进行配置。使用 Apache Mod_rewrite 的一个示例是将所有带有尾随?的请求重定向到相应的URL，而没有?。这里是一个使用.htaccess的示例，但这里有一个完整的讨论线程：

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能会因使用的 Web 服务器和堆栈而有所不同。因此，这种方法的摘要如下：

优点：

1. 这是一个真正的按钮，并且从语义上讲它是有意义的。
2. 由于它是一个真正的按钮，它也会像一个真正的按钮一样起作用（例如，当处于活动状态时，在按空格键时会拖动行为和/或模仿单击）。
3. 无需 JavaScript，无需复杂的样式。

缺点：

1. 在某些浏览器中，后面的?看起来很丑陋。这可以通过使用 POST 而不是 GET 的黑客方式（在某些情况下）进行修复，但干净的方式是进行服务器端重定向。服务器端重定向的缺点是，由于 304 重定向，这些链接会导致额外的 HTTP 调用。
2. 添加了额外的<form>元素。
3. 当使用多个表单时，元素定位可能会变得棘手，并且在处理响应式设计时会变得更加糟糕。使用此解决方案可能无法实现某些布局，并且如果设计受到此挑战的影响，则可能会影响可用性。

解决方案二：使用 JavaScript。

您可以使用 JavaScript 触发 onclick 和其他事件，以使用按钮模仿链接的行为。下面的示例可以改进并从 HTML 中删除，但它只是为了说明这个想法：

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

优点:

1. 简单易用（适合基本需求），同时保持语义，无需额外的表单。
2. 因为它是一个真正的按钮，所以它也会像真正的按钮一样工作（例如，当激活时，可以拖动或模仿按下空格键时的点击操作）。

缺点:

1. 需要 JavaScript，这意味着可访问性较差。对于链接这样的基本元素来说并不理想。

方案3: 以按钮形式样式化的锚点（链接）

将链接样式化成按钮相对容易，并且可以在不同的浏览器上提供类似的体验。Bootstrap 做到了这一点，但是您也可以使用简单的样式自行实现。

优点:

1. 简单易用（适合基本需求），跨浏览器支持良好。
2. 不需要 <form> 来工作。
3. 不需要 JavaScript 来工作。

缺点:

1. 语义方面有些问题，因为您想要一个行为像链接而不是像按钮的按钮。
2. 它无法复制解决方案＃1的所有行为。它不支持与按钮相同的行为。例如，拖动时链接会有不同的反应。此外，“空格键”链接触发器将不起作用，除非使用额外的 JavaScript 代码。这将增加许多复杂性，因为浏览器在支持按钮上的 keypress 事件方面并不一致。

结论

方案#1（表单中的按钮）似乎对用户最透明，同时需要最少的工作量。如果此选择不影响布局，并且服务器端调整可行，则对于可访问性是首要任务的情况（例如错误页面上的链接或错误消息），这是一个很好的选择。

如果 JavaScript 不会影响到您的可访问性要求，那么方案 #2（JavaScript）比 #1 和 #3 更受推崇。

如果出于某种原因，可访问性至关重要（JavaScript 不是选择），但您所处的设计和/或服务器配置阻止您使用方案 #1，则方案 #3（以按钮形式样式化的锚点）是一个良好的替代方案，可以在最小程度上影响可用性来解决此问题。

- Nicolas Bouvrette