1801

在查看大多数网站（包括 SO）时，他们中的大多数使用：

<input type="button" />

代替：

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

15 回答 15

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

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

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

于 2009-01-22T13:20:02.687 回答
376

就像旁注一样，<button>将隐式提交，如果您想在表单中使用按钮而不提交，这可能会导致问题。因此，另一个使用<input type="button">(or <button type="button">)的理由

编辑-更多细节

如果没有类型，button则隐式接收submit. 无论表单中有多少提交按钮或输入，其中任何一个显式或隐式键入为提交时，单击时都会提交表单。

按钮支持 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"
于 2012-04-09T20:13:44.607 回答
185

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

从页面：

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

按钮元素 - W3C

于 2009-01-22T13:19:04.683 回答
57

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

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

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

于 2012-03-28T04:27:58.623 回答
43

引用

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

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

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

于 2009-01-22T13:18:19.210 回答
28

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

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

一个输入( <input>) 代表一个数据字段：因此您打算将一些用户数据发送到服务器。有几种与按钮相关的输入类型：

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

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

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

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

再次，检查MDN或W3Schools<button>上的标记的 W3 参考。

于 2014-11-08T14:31:26.827 回答
18

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

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

于 2009-01-22T13:19:21.563 回答
17

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

于 2011-03-01T08:17:00.687 回答
15 
<button>
  • 默认情况下，它的行为就像它具有“type="submit" 属性
  • 可以在没有表格的情况下使用，也可以在表格中使用。
  • 允许文本或 html 内容
  • 允许使用 css 伪元素（例如 :before）
  • 标签名称通常对单个表单是唯一的

对比

<input type='button'>
  • type 应设置为 'submit' 以充当提交元素
  • 只能在表格中使用。
  • 只允许文本内容
  • 没有 CSS 伪元素
  • 与大多数表单元素（输入）相同的标签名称

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

于 2017-10-31T08:46:43.643 回答
15

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

如果由于各种原因您不能这样做，请记住在您的标签中添加属性 role=”button” 作为可访问性。这篇文章信息量很大：https ://www.deque.com/blog/accessible-aria-buttons/

于 2020-03-11T14:54:47.677 回答
10

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

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

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

于 2015-07-30T04:33:46.410 回答
10

我只想在这里的其余答案中添加一些内容。输入元素被认为是空或空元素（其他空元素是 area 、 base 、 br 、 col 、 hr 、 img 、 input 、 link 、 meta 和 param 。您也可以在这里查看），这意味着它们不能有任何内容。除了没有任何内容之外，空元素不能有任何伪元素，如 ::after 和 ::before，我认为这是一个主要缺点。

于 2017-06-19T10:20:24.840 回答
9

如果您使用 jQuery，则会有很大的不同。jQuery 知道输入事件比按钮事件多。在按钮上，jQuery 只知道“点击”事件。在输入上，jQuery 知道 'click'、'focus' 和 'blur' 事件。

您总是可以根据需要将事件绑定到您的按钮，但请注意 jQuery 自动识别的事件是不同的。例如，如果您创建了一个在页面上有“focusin”事件时执行的函数，则输入会触发该函数，但按钮不会。

于 2015-12-21T17:12:30.830 回答
7

<button>很灵活，因为它可以包含 HTML。此外，使用 CSS 设置样式要容易得多，并且样式实际上可以应用于所有浏览器。但是，Internet Explorer 也有一些缺点（Eww！IE！）。Internet Explorer 未正确检测 value 属性，使用标记的内容作为值。无论按钮是否被点击，表单中的所有值都会发送到服务器端。这使得使用它<button type="submit">变得既棘手又痛苦。

<input type="submit">另一方面，没有任何价值或检测问题，但是您不能像使用<button>. 样式也更难，并且样式并不总是在所有浏览器中都能很好地响应。希望这有帮助。

于 2014-06-27T22:51:11.147 回答
4

此外，差异之一可能来自库的提供者，以及他们编码的内容。例如，这里我将cordova平台与移动角度用户界面结合使用，虽然输入/div/etc标签与ng-click配合得很好，但该按钮可能会导致Visual Studio调试器崩溃，这肯定是由于程序员造成的差异；请注意，MattC 的回答指向了同样的问题，jQuery 只是一个库，并且提供者没有想到一个元素上的某些功能，而他/她在另一个元素上提供了这些功能。因此，当您使用库时，您可能会遇到一个元素的问题，而您不会遇到另一个元素。简单来说，流行的喜欢input，将主要是固定的，只是因为它更受欢迎。

于 2016-01-02T08:23:22.450 回答