<button> 与<input type="“button”" />.其使用？

Question

当看到最网站(包括这样)，他们大多使用：

<input type="button" />

代替：

<button></button>

• 有哪些主要差异，两者之间，如果有的话？
• 是否有有效的理由使用一种而不是其他的？
• 是否有有效的原因的使用结合他们？
• 不会使用 <button> 来兼容性问题，看它是不是很广泛使用？

Answer 1

• 这里有一个页面 描述差异(基本上你可以把html成 <button></button>)
• 和另一个网页 描述为什么人们避免 <button></button> (暗示:IE6)

另一个问题，即时使用 <button />:

虽然我们在谈论即，它的 有几个错误关系到 宽度的按钮。就会神不知鬼不觉 添加额外的填充当你试图 添加的风格，这意味着你必须添加 一个小小的黑客得到的东西下 控制。

Answer 2

只是作为一个侧面说明， <button> 会隐含地提出，这可能会造成问题，如果你想使用一个按钮式的，没有它提交。因此，另一个原因使用 <input type="button"> (或 <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"

Answer 3

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

从页：

按钮创建的按钮元件的功能只是喜欢按钮 创建该输入的单元，但是 他们提供更丰富的呈现 可能性：按钮元可以 有内容。例如，一个按钮 元素，其中包含一个图像 功能状和可能类似于一个 输入单元，其类型设定为 "图像"，但按钮件类型 允许的内容。

按钮元W3C

Answer 4

内部 <button> 元素可以把内容，如文本或图像。

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

这是之间的差别这个元件和创建的按钮 <input> 元素。

Answer 5

报价

重要的是：如果您使用的按钮元素在HTML形式，不同的浏览器将提交不同的价值观。Internet Explorer会提交的文本之间 <button> 和 </button> 标签，而其他浏览器将提交内容的价值的属性。使用的输入单元创建的按钮在HTML形式。

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

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

Answer 6

引述 形式的页面 在HTML手册：

按钮创建的按钮元件的功能只是像创建的按钮输入元素，但他们提供更丰富的渲染的可能性：按钮件可具有的内容。例如，一个按钮元，其中包含一个图像功能，并可能类似于一个输入单元，其类型设定为"图像"，但按钮件类型允许的内容。

Answer 7

使用按钮输入单元如果你想要创建的按钮，在一种形式。和使用按钮标签的如果你想要创建的按钮的行动。

Answer 8

我将引用的文章 之间的差锚、投入和按钮:

锚 (的 <a> 元件)表示的超链接，资源的人可以浏览到或下载在浏览器。如果你想让你的用户的移动到一个新网页或下载文件，然后用一个锚。

一个 输入 (<input>)表示数据的领域：因此，一些用户的数据你是说要送到服务器。有几个输入类型相关的按钮： <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
他们每个人都有一个含义，例如"文件"用于上载一个文件，"重置"清除的一种形式，"提交"发送的数据服务器。检查W3参考 在MDN 或 在W3Schools.

的 按钮 (<button>) 元素是很多功能：

• 你可以窝元内的一个按钮，如图像、文各段，或 标题;
• 还可以包含的按钮 ::before 和 ::after 伪元素；
• 按钮支持 disabled 属性。这使得它很容易打开 他们开启和关闭。

再次，检查W3参考 <button> 标记 在MDN 或 在W3Schools.

Answer 9

有一个很大的区别如果您使用的！,这是意识到的更多活动的投入，而不是按钮。在按钮上。只是意识到的"点击"的事件。投入。是知道的"点击",'关注'，和'模糊'事件。

你总是可以结合事件给你的按钮以根据需要，但只是知道这发生的事件jQuery自动知道的是不同的。例如，如果创建了一个功能，是执行，只要有一个'注'事件在你的网页，输入将触发功能，但一个按钮，不会。

Answer 10

<button>

• 通过默认的行为就像如果有个"type="submit"属性
• 可以不使用的一种形式以及在形式。
• 文本内容允许或html
• css伪的要素允许的(如：前)
• 标签名称通常是独一个单一的形式

与

<input type='button'>

• 类型应该被设置为"提交"的行为作为提交元
• 只能用形式。
• 只有文字内容的允许
• 没有css伪元素
• 同样的标签名，因为大多数形式的要素(投入)

--
在现代浏览器，这两个元素是很容易设置样式与css但在大多数情况下， button 元素是首选，因为你风格的更多内html和伪元素

Answer 11

尽CSS造型是有关的 <button type="submit" class="Btn">Example</button> 是更好的，因为它让你能够使用CSS :before 和 :after 伪类 它可帮助。

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

这是非常值得注意的 目前的最高的答案 是写在2009年。IE6不是一个问题，现在天使 <button type="submit">Wins</button> 造型的一致性在我眼里出来在上面。

Answer 12

<button> 是灵活的，因为它可以包含HTML。而且，这是很容易的风格用CSS和定型实际上是被适用于所有浏览器。但是，也有一些缺点有关的互联网浏览器(嗯！IE!).Internet Explorer没有检测到的数值属适当，使用标记的内容作的价值。所有价值观的形式向服务器发送侧，无论是否按钮被点击。这使得使用它作为一个 <button type="submit"> 棘手和一个痛苦。

<input type="submit"> 另一方面没有任何价值或者检测的问题，但是你不能，但是，加HTML喜欢你可以带 <button>.这也难的风格和定型并不总是反应良好，所有的浏览器。希望这有所帮助。

Answer 13

我只是想增加一些其余问题的答案在这里。输入因素被认为是空白或空隙元(其他空元素的区域，基础，br，col，人力资源，img、输入、链接、间，并参数。你还可以检查 在这里，)，这意味着它们不能有任何内容。此外，不具有任何内容，空元素 不能有任何伪元素如：：在并且：前, 我考虑的一个主要缺点。

Answer 14

此外，一差异可能来自供应商的图书馆，以及他们的代码。例如在这里，我采用多平台的合移动的角ui，并同时输入/div/等标签的工作以及与ng击按钮就可以导致Visual Studio调试器崩溃，当然分歧，这一程序导致的；注意MattC答复指向同一个问题，延长仅仅是一个lib，并提供者没有想到的一些功能上的一个元素，即s/他提供另一个。所以当你使用一个图书馆，你可能会面临的一个问题与一个元素，你会不会脸上有另一个。简直就是受欢迎的一样 input, 将主要是固定的，只是因为它更受欢迎。