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

Posted 2023-05-09

技术标签:

【中文标题】<button> 与 <input type="button" />。使用哪个？【英文标题】：<button> vs. <input type="button" />. Which to use? 【发布时间】：2009-01-22 13:14:11 【问题描述】：

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

<input type="button" />

代替：

<button></button>

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

【问题讨论】：

引用 documentation 截至 2020 年 10 月：

While &lt;input&gt; elements of type button are still perfectly valid html, the newer &lt;button&gt; element is now the favored way to create buttons. Given that a &lt;button&gt;’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

@Jakob 我知道 MDN 是一个不错的参考，但我在 HTML5 规范或任何类似 RFC 的文档中找不到类似的建议。 @Jakob Mozilla 开发者网络不是“文档”，它是一个公共（志愿者）驱动的资源，其功能更像是一个[方便的]“附录”以被广泛接受类似于 WHATWG 在html.spec.whatwg.org 发布的 HTML 5 规范。 【参考方案1】： Here's a page 描述差异（基本上可以将 html 放入 <button></button>） And another page 描述人们为什么避免使用 <button></button>（提示：IE6）

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

当我们谈论 IE 时，它是有几个与按钮的宽度。会莫名其妙的尝试时添加额外的填充添加样式，这意味着您必须添加一个小技巧来解决问题控制。

【讨论】：

这个答案是在 2009 年，因为 IE6 现在已经死了，我认为现在没有理由不使用<button>？如果他们想盗版，让他们得到你网站的烂版。弃IE6，弃IE7，可惜IE8还需要支持。根据微软的IE6 Countdown page，中国的IE6使用率仍然保持在22%左右（截至2014年1月）。 ie6death.com 指出，IE6 支持将于 2014 年 4 月 8 日结束。【参考方案2】：

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

编辑 - 更多细节

没有类型，button implicitly receives type of 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"

【讨论】：

【参考方案3】：

This article 似乎很好地概述了差异。

从页面：

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

按钮元素 - W3C

【讨论】：

【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

引用

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

发件人：http://www.w3schools.com/tags/tag_button.asp

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

【讨论】：

【参考方案6】：

我会引用文章The Difference Between Anchors, Inputs and Buttons：

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

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

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

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

按钮（<button>) 元素用途广泛：

您可以在按钮中嵌套元素，例如图像、段落或标题；按钮还可以包含::before 和::after 伪元素；按钮支持disabled 属性。这样很容易转开关。

再次检查 W3 参考中的 <button> 标签 on MDN 或 on W3Schools。

【讨论】：

【参考方案7】：

引用 HTML 手册中的Forms Page：

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

【讨论】：

【参考方案8】：

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

【讨论】：

用于客户端脚本。在 HTML 中没有任何功能。【参考方案9】：

<button>

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

对比

<input type='button'>

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

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

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

就 CSS 样式而言，<button type="submit" class="Btn">Example</button> 更好，因为它使您能够使用 CSS :before 和 :after pseudo classes，这会有所帮助。

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

值得注意的是 current top answer 是在 2009 年编写的。IE6 现在已经不是问题了，所以 <button type="submit">Wins</button> 在我眼中的样式一致性是最重要的。

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

如果你使用 jQuery，会有很大的不同。 jQuery 知道输入事件比按钮事件多。在按钮上，jQuery 只知道“点击”事件。在输入时，jQuery 知道“点击”、“焦点”和“模糊”事件。

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

【讨论】：

re: KjetilNordin - 我们有一个应用程序知道页面上的任何焦点事件，并且发生了一个动作。因此，如果使用输入，您可以查看单个事件的所有元素。不是说你应该，但你可以。风险在于有人将输入更改为按钮，然后焦点不会发生，然后您的操作不会发生，然后您的应用程序就会繁荣。这就是发生在我们身上的事情。 :) 当前通过鼠标/键盘定位元素时使用焦点事件。它们向用户显示他们在文档中的位置。【参考方案14】：

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

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

【讨论】：

【参考方案15】：

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