Html <button> 与 <input type="button" />。使用哪个？

<button> vs. <input type="button" />. Which to use?

提问by Aron Rotteveel

When looking at most sites (including SO), most of them use:

在查看大多数站点（包括 SO）时，大多数站点都使用：

<input type="button" />

instead of:

代替：

<button></button>

• What are the main differences between the two, if any?
• Are there valid reasons to use one instead of the other?
• Are there valid reasons to use combine them?
• Does using <button>come with compatibility issues, seeing it is not very widely used?

• 如果有的话，两者之间的主要区别是什么？
• 是否有正当理由使用一个而不是另一个？
• 使用组合它们是否有正当理由？
• 使用是否<button>有兼容性问题，看到它不是很广泛使用？

采纳答案by Tamas Czinege

• Here's a pagedescribing the differences (basically you can put html into a <button></button>)
• And another pagedescribing why people avoid <button></button>(Hint: IE6)

• 这是描述差异的页面（基本上您可以将 html 放入<button></button>）
• 另一个页面描述了人们为什么避免使用<button></button>（提示：IE6）

Another IE problem when using <button />:

使用时的另一个 IE 问题<button />：

And while we're talking about IE, it's got a couple of bugs related to the width of buttons. It'll mysteriously add extra padding when you're trying to add styles, meaning you have to add a tiny hack to get things under control.

当我们谈论 IE 时，它有几个与按钮宽度相关的错误。当您尝试添加样式时，它会神秘地添加额外的填充，这意味着您必须添加一个小技巧来控制事情。

回答by Travis J

Just as a side note, <button>will implicitly submit, which can cause problems if you want to use a button in a form without it submitting. Thus, another reason to use <input type="button">(or <button type="button">)

正如旁注，<button>将隐式提交，如果您想在不提交的情况下使用表单中的按钮，这可能会导致问题。因此，使用<input type="button">（或<button type="button">）的另一个原因

Edit- more details

编辑-更多细节

Without a type, buttonimplicitly receives type of submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form.

没有类型，button隐式接收类型submit。表单中有多少提交按钮或输入并不重要，其中任何一个显式或隐式类型为提交的按钮或输入在单击时都会提交表单。

There are 3 supported types for a button

按钮支持 3 种类型

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

回答by Noldorin

This articleseems to offer a pretty good overview of the difference.

这篇文章似乎很好地概述了差异。

From the page:

从页面：

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

使用 BUTTON 元素创建的按钮的功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。

按钮元素 - W3C

回答by Santhosh

Inside a <button>element you can put content, like text or images.

在<button>元素中，您可以放置​​内容，例如文本或图像。

<button type="button">Click Me!</button> 

This is the difference between this element and buttons created with the <input>element.

这是此元素与使用该<input>元素创建的按钮之间的区别。

回答by user54579

Quote

引用

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button>and </button>tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

重要提示：如果您在 HTML 表单中使用 button 元素，不同的浏览器将提交不同的值。Internet Explorer 将提交<button>和</button>标签之间的文本，而其他浏览器将提交 value 属性的内容。使用 input 元素在 HTML 表单中创建按钮。

From : http://www.w3schools.com/tags/tag_button.asp

来自：http: //www.w3schools.com/tags/tag_button.asp

If I understand correctly, the answer is compatibility and input consistency from browser to browser

如果我理解正确，答案是从浏览器到浏览器的兼容性和输入一致性

回答by Attilio

I will quote the article The Difference Between Anchors, Inputs and Buttons:

我将引用文章锚点、输入和按钮之间的区别：

Anchors(the <a>element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.

锚（<a>元素）代表超链接，一个人可以在浏览器中导航或下载的资源。如果您想让您的用户移动到新页面或下载文件，请使用锚点。

An input(<input>) represents a data field: so some user data you mean to send to server. There are several input types related to buttons:

一个输入（<input>）表示数据字段：所以一些用户数据你的意思发送给服务器。有几种与按钮相关的输入类型：

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDNor on W3Schools.

它们每个都有一个含义，例如“文件”用于上传文件，“重置”用于清除表单，“提交”将数据发送到服务器。检查MDN或W3Schools上的W3 参考。

The button(<button>)element is quite versatile:

的按钮（<button>)元素是相当具有通用性：

• you can nest elements within a button, such as images, paragraphs, or headers;
• buttons can also contain ::beforeand ::afterpseudo-elements;
• buttons support the disabledattribute. This makes it easy to turn them on and off.

• 您可以在按钮内嵌套元素，例如图像、段落或标题；
• 按钮也可以包含::before和::after伪元素;
• 按钮支持该disabled属性。这使得打开和关闭它们变得容易。

Again, check W3 reference for <button>tag on MDNor on W3Schools.

同样，在 MDN或W3Schools上检查 W3 参考以获取<button>标记。

回答by gimel

Quoting the Forms Pagein the HTML manual:

引用HTML 手册中的表单页面：

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

使用 BUTTON 元素创建的按钮的功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。

回答by nickomarsa

Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.

如果要在表单中创建按钮，请使用输入元素中的按钮。如果要为操作创建按钮，请使用按钮标签。

回答by Sergey Sklyar

<button>

• by default behaves like if it had a "type="submit" attribute
• can be used without a form as well as in forms.
• text or html content allowed
• css pseudo elements allowed (like :before)
• tag name is usually unique to a single form

• 默认情况下，它的行为就像它有一个“type=”submit”属性
• 可以在没有表格的情况下使用，也可以在表格中使用。
• 允许文本或 html 内容
• 允许使用 css 伪元素（如 :before）
• 标签名称通常对单个表单是唯一的

vs.

对比

<input type='button'>

• type should be set to 'submit' to behave as a submitting element
• can only be used in forms.
• only text content allowed
• no css pseudo elements
• same tag name as most of the forms elements (inputs)

• 类型应设置为“提交”以作为提交元素
• 只能在表格中使用。
• 只允许文本内容
• 没有 css 伪元素
• 与大多数表单元素（输入）相同的标签名称

--
in modern browsers, both elements are easily styleable with css but in most cases, buttonelement is preferred as you can style more with inner html and pseudo elements

--
在现代浏览器中，这两个元素都可以使用 css 轻松设置样式，但在大多数情况下，button元素是首选，因为您可以使用内部 html 和伪元素设置更多样式

回答by jnowland

As far as CSS styling is concerned the <button type="submit" class="Btn">Example</button>is better as it gives you the ability to use CSS :beforeand :afterpseudo classeswhich can help.

就 CSS 样式而言，<button type="submit" class="Btn">Example</button>它更好，因为它使您能够使用 CSS:before和可以提供帮助的:after伪类。

Due to the <input type="button">visually rendering different to an <a>or <span>when styled with classes in certain situations I avoid them.

由于<input type="button">视觉上呈现不同的一个<a>或<span>当在某些情况下类风格我避开他们。

It's very worth noting the current top answerwas written in 2009. IE6 isn't a concern now days so <button type="submit">Wins</button>styling consistency in my eyes comes out on top.

值得注意的是，当前的最佳答案是在 2009 年编写的。现在 IE6 不再是一个问题，因此<button type="submit">Wins</button>我眼中的样式一致性是最重要的。