<button>与<input type =“button”/>。哪个用？</button>

时间：2009-01-22 13:14:11

标签： html button compatibility html-input

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

<input type="button" />

而不是：

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

15 个答案:

答案 0 :(得分：620)

  • Here's a page描述差异（基本上你可以将html放入<button></button>）
  • And another page描述人们为什么要避免<button></button>（提示：IE6）

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

  

虽然我们在谈论IE，但它是   得到了一些与此相关的错误   按钮的宽度。这神秘莫测   在尝试时添加额外的填充   添加样式，意味着你必须添加   把事情搞得一团糟的小黑客   控制。

答案 1 :(得分：295)

正如旁注，<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"

答案 2 :(得分：164)

This article似乎对差异提供了很好的概述。

从页面：

  

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

     

按钮元素 - W3C

答案 3 :(得分：40)

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

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

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

答案 4 :(得分：37)

引用

  

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

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

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

答案 5 :(得分：16)

在HTML手册中引用Forms Page：

  

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

答案 6 :(得分：16)

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

答案 7 :(得分：16)

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

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

输入（<input>）表示数据字段：因此您要将某些用户数据发送到服务器。有几种与按钮相关的输入类型：<input type="submit">，<input type="image">，<input type="file">，<input type="reset">，<input type="button">。
它们中的每一个都有含义，例如＆＃34; file ＆＃34;用于上传文件，＆＃34; 重置＆＃34;清除表单，＆＃34; 提交＆＃34;将数据发送到服务器。检查W3参考on MDN或on W3Schools。

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

  • 您可以在按钮中嵌套元素，例如图像，段落或 头;
  • 按钮还可以包含::before和::after伪元素;
  • 按钮支持disabled属性。这样可以轻松转动 他们打开和关闭。

再次检查<button>代码on MDN或on W3Schools的W3参考。

答案 8 :(得分：8)

如果您使用的是jQuery，则会有很大的不同。 jQuery知道输入上的事件多于按钮上的事件。在按钮上，jQuery只知道＆＃39;点击＆＃39;事件。在输入上，jQuery知道“点击”，“焦点”，“模糊”等。事件

您可以随时根据需要将事件绑定到按钮，但请注意jQuery自动识别的事件是不同的。例如，如果您创建了一个功能，只要有焦点＆＃39;就会执行该功能。在您的页面上的事件，输入将触发该功能，但按钮不会。

答案 9 :(得分：8)

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

万一由于各种原因而不能这样做，请记住在可访问性中将属性role =“ button”添加到标签中。 本文内容丰富：https://www.deque.com/blog/accessible-aria-buttons/

答案 10 :(得分：7)

就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>我眼中的造型一致性就出现了。

答案 11 :(得分：7)

<button>
    默认情况下，
  • 的行为类似于“type =”submit“attribute”
  • 可以在没有表格的情况下使用。
  • 允许的文字或html内容
    • 允许
  • css伪元素（如：之前）
  • 标记名称通常对单个表单唯一

VS 

<input type='button'>
  • 类型应设置为“submit”以表现为提交元素
  • 只能用于表格。
  • 仅允许文字内容
  • 没有css伪元素
  • 与大多数表单元素（输入）相同的标记名称

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

答案 12 :(得分：6)

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

另一方面，

<input type="submit">没有任何价值或检测问题，但您无法像<button>一样添加HTML。它的风格也更难，而且样式并不总能在所有浏览器中做出很好的反应。希望这有帮助。

答案 13 :(得分：4)

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

答案 14 :(得分：3)

此外，其中一个差异可能来自库的提供者，以及他们编码的内容。例如，我在使用cordova平台与移动角度ui结合使用，而输入/ div / etc标签与ng-click配合良好，按钮可能会导致Visual Studio调试器崩溃，当然程序员造成的差异;请注意，MattC回答同一问题，jQuery只是一个lib，并且提供者没有想到一个元素上的某些功能，他/她在另一个元素上提供。因此，当您使用库时，您可能会遇到一个元素的问题，您将不会面对另一个元素。而像private boolean evaluate(Map<String, Object> userMetaData, Expression expression) { if (expression.getLogicalOperation() == LogicalOperationEnum.and) { for (UserCondition c : expression.getConditions()) { if (c.getOperation().getName() == ">" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) <= 0) { return false; } else if (c.getOperation().getName() == "<" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) >= 0) { return false; } else if (c.getOperation().getName() == "<=" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) > 0) { return false; } else if (c.getOperation().getName() == ">=" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) < 0) { return false; } else{ return true; } } } else if (expression.getLogicalOperation() == LogicalOperationEnum.or) { for (UserCondition c : expression.getConditions()) { if (c.getOperation().getName() == ">" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) > 0) { return true; } else if (c.getOperation().getName() == "<" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) < 0) { return true; } else if (c.getOperation().getName() == "<=" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) <= 0) { return true; } else if (c.getOperation().getName() == ">=" && String.valueOf(userMetaData.get(c.getField())).compareTo(String.valueOf(c.getValue())) >= 0) { return true; } } } return false; } 这样的流行的，大多数都是固定的，只是因为它更受欢迎。

相关问题
最新问题