<input type='submit' /> 和 <button type='submit'>text</button> 之间的区别是什么？

Question

有很多传说关于它们，但我想知道真相。下面这两个示例有什么区别？

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

- James

---

你是说 <input type="submit"> 和 <button type="submit"> 吗？ - kennytm

可能是<input type='button' />和<input type='submit' />之间的区别的重复问题。 - Hakan Fıstık

“input”是一个无需结束标签的元素。请勿使用“<input />”，仅使用“<input>”。 - CDT

@HakanFıstık，不是那个问题的重复，已经解决过了，那是一个（或多或少）不同的问题，例如type=submit对于button甚至不是一个问题（可能因为它当时甚至不是标准的一部分（据我所知），当那个其他问题被问出来时）。 - Sz.

这回答了你的问题吗？<button> 与 <input type="button" />，该使用哪一个？ - user12260140

Answer 1

我不确定你从哪里得到你的图例，但是：

使用<button>创建提交按钮

与以下相同：

<button type="submit">(html content)</button>

在IE6中，此按钮的所有文本都将被提交，而其他浏览器只会提交值。使用<button>可以使您对按钮的设计具有更多布局自由度。首先它似乎非常出色，但是各种浏览器问题有时使其难以使用。

在你的示例中，IE6将向服务器发送text，而大多数其他浏览器将不发送任何内容。为了实现跨浏览器兼容性，请使用<button type="submit" value="text">text</button>。更好的方法是：不要使用value，因为如果添加HTML，则在服务器端接收到的内容会变得相当棘手。如果必须发送额外的值，请使用隐藏字段。

使用<input>的按钮

如下所示：

<input type="button" />

默认情况下，按钮并不会有任何作用。它甚至不会提交您的表单。您只能通过CSS设置按钮的文本、大小和边框。它最初（并且目前仍然）的意图是在不需要将表单提交到服务器的情况下执行脚本。

使用<input>元素的普通提交按钮

与以下内容一样：

<input type="submit" />

类似前一个，但实际上会提交周围的表单。

使用<input>元素创建图像提交按钮

与下面类似：

<input type="image" />

与前者（submit）类似，它也会提交表单，但是您可以使用任何图像。在需要提交表单时，这曾经是使用图像作为按钮的首选方式。为了获得更多控制权，现在使用<button>。这也可以用于服务器端图像映射，但这在今天已经很少见了。当您使用usemap属性时（带或不带该属性），浏览器将向服务器发送鼠标指针X/Y坐标（更精确地说，是在您单击按钮时瞬间鼠标指针位置内的按钮）。如果您忽略这些额外信息，它只不过是一个伪装成图像的提交按钮。

虽然各个浏览器之间存在一些细微差别，但所有浏览器都将提交value属性，除了如上所述的<button>标签。

- Abel

---

既然你已经在编辑了，那么关于IE6的观点在quirks模式下使用IE11仍然是正确的。（这是不使用quirks模式的另一个原因）。但在Edge中已经修复了。哦，还有<input>和<button>之间的更多差异：<input>默认具有white-space:pre，而<button>则没有。当试图使按钮宽于视口时，这变得明显。 - Mr Lister

Answer 2

使用<button>标签时，可以在其中使用img等标签来代替文本。

<button type='submit'> text -- can be img etc.  </button>

使用 <input> 标签，并且 type 属性为文本时，你只能输入文本内容。

- Sparky

---

使用 <input type="image" /> 不仅不受文本限制，而且还可以执行提交操作。 - Abel

@Abel：这更多是创建一个图像映射，然后将鼠标指针位置作为 name.x 和 name.y 参数发送（注意 name 参数不存在！）。如果唯一目的是拥有带背景图像的按钮，则我宁愿使用 <input type="submit"> 与 CSS 背景。 - BalusC

@BalusC：没错，但是在编写HTML 2.0标准时，还没有CSS，它的目的就是像描述的那样，将图像用作按钮或服务器端图像映射。但确实，您可以使用带有背景图像的普通按钮来滥用CSS和HTML以实现相同的效果。 - Abel

@Abel：这从来不是“input type="image"”的意图。对于此，应使用“<button type="submit">”。 - BalusC

@BalusC：也许我们对标准的理解不同，但这是Lee在HTML 2.0标准的原始文本中写的：“ TYPE=IMAGE意味着TYPE=SUBMIT处理；也就是说，当选择一个像素时，整个表单被提交。”你可以理解为真正的意图。 - Abel

当一个像素被选择，确实 :) - BalusC

Answer 3

总结：

<input type="submit">

<button type="submit"> Submit </button>

默认情况下，两者都会显示执行相同操作（提交表单）的按钮。

然而，建议使用<button type="submit"> ，因为它具有更好的语义、更好的ARIA支持和更容易进行样式设计。

- Juanma Menendez