<input type='submit' />和<button type='submit'>文字之间的区别</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>

标签之外，所有浏览器都会提交值属性。

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 支持并且更容易设计样式。

Answer 4

语法

如果我们从表面上考虑，唯一的区别是

button

元素在内部提供了更灵活的内容样式（例如，添加图标）：

<button type="submit">
    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      stroke="red"
      fill="grey"
    >
      <circle cx="50" cy="50" r="40" />
    </svg>
    Log In
</button>

而 

input

组件使用 value 属性作为按钮标签：

<input type="submit" value="Send Request" />

HTML5 语义

如果您深入研究生成的 html 的语义。分析站点的外部工具可以得出有关输入字段或按钮的自己的结论。该规范不建议使用其中之一，因为这是描述同一事物的不同方式。

浏览器支持

如果您需要对旧浏览器版本的支持，最好使用

input

。自己检查并决定：

我可以使用：输入类型提交
我可以使用：按钮类型提交