<按钮>vs.<输入类型="按钮"/>。使用哪个？

小开

引用

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

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

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

小开

这篇文章似乎提供了一个很好的差异概述。

从页面：

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

按钮元素-W3C

小开

引用超文本标记语言手册中的表格页：

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

小开

最佳答案

这是一页描述差异（基本上你可以把html放在<button></button>中）
另一页描述为什么人们避免<button></button>（提示：IE6）

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

当我们谈论IE时，它是有几个错误与按钮的宽度。它会神秘地在尝试时添加额外的填充添加样式，这意味着您必须添加一个小小的黑客把东西弄下来控制。

小开

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

小开

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

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

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

小开

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

编辑-更多细节

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

一个按钮支持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"

小开

<button>是灵活的，因为它可以包含超文本标记语言。此外，使用CSS设置样式要容易得多，并且样式实际上可以在所有浏览器上应用。然而，Internet Explorer（Eww！ IE！）有一些缺点。Internet Explorer不能正确检测value属性，使用标签的内容作为值。无论是否单击按钮，表单中的所有值都将发送到服务器端。这使得将其用作<button type="submit">变得棘手和痛苦。

另一方面，<input type="submit">没有任何值或检测问题，但是您不能像<button>那样添加超文本标记语言。样式也更难，样式并不总是在所有浏览器上响应良好。希望这有帮助。

小开

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

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

输入（<input>）代表一个数据栏：所以您要发送到服务器的一些用户数据。有几种与按钮相关的输入类型：

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

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

按钮（<button>)元素非常通用：

您可以将元素嵌套在按钮中，例如图像、段落或标题；
按钮也可以包含::before和::after伪元素；
按钮支持disabled属性。这使得转动变得容易他们在和关闭。

再次，检查W3参考<button>标签在mdn或在w3学校。

小开

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

由于<input type="button">在视觉上呈现不同于<a>或<span>，当在某些情况下使用类时，我避免使用它们。

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

小开

如果你使用的是jQuery，那就有很大的不同了。jQuery对输入的事件的感知比对按钮的感知更多。在按钮上，jQuery只感知“点击”事件。在输入上，jQuery感知“点击”、“焦点”和“模糊”事件。

你可以根据需要将事件绑定到你的按钮，但要注意jQuery自动感知的事件是不同的。例如，如果你创建了一个函数，每当页面上有“聚焦”事件时就会执行该函数，输入会触发该函数，但按钮不会。

小开

例如，在这里我使用科尔多瓦平台与移动角度用户界面相结合，而输入/div/etc标签与ng-Click一起工作良好，该按钮可能导致Visual Studio调试器崩溃，肯定是由程序员引起的差异；请注意，MattC回答指向相同的问题，jQuery只是一个库，提供者没有想到一个元素上的一些功能，那是他/她在另一个元素上提供的。成为固定的，只是因为它更受欢迎。

小开

我只是想在这里的其余答案中添加一些东西。输入元素被认为是空或空元素（其他空元素是区域、基础、br、colr、hr、img、输入、链接、元和参数。你也可以检查这里），这意味着它们不能有任何内容。除了没有任何内容之外，空元素不可能有::af和::bef等伪元素，我认为这是一个主要缺点。

小开

<button>

默认情况下，它的行为就像如果它有一个“type=”提交“属性
既可以不用表单也可以用在表单中。
允许文本或html内容
允许css伪元素（如：之前）
标记名称通常是单个表单唯一的

vs.

<input type='button'>

type应设置为“提交”以充当提交元素
只能以形式使用。
只允许文本内容
没有css伪元素
与大多数表单元素（输入）相同的标记名称

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

小开

虽然这是一个非常古老的问题，可能不再相关，但请记住，<button>标签曾经存在的大多数问题不再存在，因此强烈建议使用它。

如果由于各种原因您无法这样做，请记住在您的标签中添加属性角色=“按钮”作为可访问性。这篇文章内容丰富：https://www.deque.com/blog/accessible-aria-buttons/