Html <input type='submit' /> 和 <button type='submit'>text</button> 的区别

Difference between <input type='submit' /> and <button type='submit'>text</button>

提问by James

There are many legends about them. I want to know the truth. What are the differences between the two following examples?

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

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

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

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

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

采纳答案by Abel

Not sure where you get your legends from but:

不知道你从哪里得到你的传说，但是：

Submit button with <button>

提交按钮 <button>

As with:

与：

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

IE6 will submit all text for this button between the tags, other browsers will only submit the value. Using <button>gives you more layout freedom over the design of the button. In all its intents and purposes, it seemed excellent at first, but various browser quirks make it hard to use at times.

IE6 会在标签之间提交这个按钮的所有文本，其他浏览器只会提交值。使用可以<button>让您在按钮设计上有更多的布局自由。就其所有意图和目的而言，一开始它似乎非常出色，但浏览器的各种怪癖有时使其难以使用。

In your example, IE6 will send textto the server, while most other browsers will send nothing. To make it cross-browser compatible, use <button type="submit" value="text">text</button>. Better yet: don't use the value, because if you add HTML it becomes rather tricky what is received on server side. Instead, if you must send an extra value, use a hidden field.

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

Button with <input>

按钮与 <input>

As with:

与：

<input type="button" />

By default, this does next to nothing. It will not even submit your form. You can only place text on the button and give it a size and a border by means of CSS. Its original (and current) intent was to execute a script without the need to submit the form to the server.

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

Normal submit button with <input>

普通提交按钮 <input>

As with:

与：

<input type="submit" />

Like the former, but actually submits the surrounding form.

像前者，但实际上提交了周围的表单。

Image submit button with <input>

图片提交按钮 <input>

As with:

与：

<input type="image" />

Like the former (submit), it will also submit a form, but you can use any image. This used to be the preferred way to use images as buttons when a form needed submitting. For more control, <button>is now used. This can also be used for server side image mapsbut that's a rarity these days. When you use the usemap-attribute and (with or without that attribute), the browser will send the mouse-pointer X/Y coordinates to the server (more precisely, the mouse-pointer location inside the button of the moment you click it). If you just ignore these extras, it is nothing more than a submit button disguised as an image.

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

There are some subtle differences between browsers, but all will submit the value-attribute, except for the <button>tag as explained above.

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

回答by Sparky

With <button>, you can use img tags, etc. where text is

使用<button>，您可以在文本所在的位置使用 img 标签等

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

with <input>type, you are limited to text

使用<input>类型，您仅限于文本

回答by Juanma Menendez

In summary :

总之 ：

<input type="submit">

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

Both by default will visually draw a button that performs the same action (submit the form).

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

However, it is recommended to use <button type="submit">because it has better semantics, better ARIA support and it is easier to style.

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