<input type =“submit”/>和<button type =“submit”> text </button>之间的区别

Question

关于他们的传说很多。我想知道真相。以下两个例子之间有什么区别？

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

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

Answer 1

不知道你的传说来自哪里，但是：

使用<button>

提交按钮

与：

一样

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

IE6将在标签之间提交此按钮的所有文本，其他浏览器只会提交该值。使用<button>可以为按钮的设计提供更多的布局自由度。从它的所有意图和目的来看，它起初看起来很棒，但各种浏览器怪癖有时难以使用。

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

带<input>

的按钮

与：

一样

<input type="button" />

默认情况下，这几乎没有。它甚至不会提交您的表格。您只能在按钮上放置文本，并通过CSS为其指定大小和边框。它的原始（和当前）意图是执行脚本而无需将表单提交给服务器。

<input>

的正常提交按钮

与：

一样

<input type="submit" />

与前者一样，但实际上提交了周围的表格。

<input>

的图片提交按钮

与：

一样

<input type="image" />

与前者（提交）一样，它也会提交表单，但您可以使用任何图像。当表单需要提交时，这曾经是将图像用作按钮的首选方式。为了更好地控制，现在使用<button>。这也可用于服务器端图像映射，但这些日子很少见。当您使用usemap - 属性和（有或没有该属性）时，浏览器会将鼠标指针X / Y坐标发送到服务器（更确切地说，当前按钮内的鼠标指针位置）你点击它）。如果您只是忽略这些额外内容，它只不过是一个伪装成图像的提交按钮。

浏览器之间存在一些细微差别，但除了上面解释的<button>标记外，所有人都会提交value-attribute。

Answer 2

使用<button>，您可以使用img标签等文字

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

<input>类型，您只能使用文字

Answer 3

总结：

<input type="submit">

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

默认情况下，两者都将在视觉上绘制一个执行相同操作的按钮（提交表单）。

但是，建议使用<button type="submit">，因为它具有更好的语义，更好的ARIA支持并且更易于样式化。