button - <button> vs. <input type=“button” />.选哪个用?

  显示原文与译文双语对照的内容

在查看大多数站点( 包括如此) 时,大多数站点使用:


<input type="button"/>

替代:


<button></button>

  • 两者之间的主要区别是什么,如果有的话?
  • 使用一个而不是另一个有有效的理由?
  • 使用组合的理由是否有效?
  • 使用 <button> 有兼容性问题,看到它并不是很广泛?
时间: 原作者:

使用其他 when: IE 问题

当我们谈论 IE 时,它有几个与按钮宽度相关的Bug 。 当你试图添加样式时,它会神秘地添加额外的填充,这意味着你必须添加一个很小的hack 来控制。

原作者:

顺便说一句,<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"

原作者:

报价单

重要:如果你使用HTML表单中的按钮元素,不同的浏览器将提交不同的值。 IE 将提交 <button></button> 标记之间的文本,而其他浏览器将提交值属性的内容。 使用输入元素在HTML表单中创建按钮。

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

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

原作者:

在元素中,你可以放置内容,比如文本或者图像。


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

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

原作者:

我将引用文章 Anchors输入和按钮的区别:

磅的锚 ( <a> 元素) 代表超链接,用户可以浏览或者在浏览器中下载。 如果你想让你的用户移动到一个新页面或者下载一个文件,那么使用一个锚。

一个输入 ( <input> ) 表示一个数据字段: 所以你要发送给服务器的一些用户数据。 有几个与按钮相关的输入类型: <input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">
每一个都有一个含义,例如"文件"用来上传一个文件,"复位"清除一个表单,"提交"把数据发送给服务器。 检查W3参考 MDN 上或者W3shool上

按钮 ( <button>) 元素相当通用:

  • 可以嵌套按钮中的元素,如图像,段落或者页眉;
  • 按钮也可以包含 ::before::after pseudo-elements ;
  • 按钮支持 disabled 属性。 这使得打开和关闭它们变得容易。

接着,检查W3参考MDN上对于 <button> 标记 W3shool上或者

原作者:

<button> 是灵活的,它可以包含 HTML 。 此外,使用CSS更易于样式化,而且样式实际上可以在所有浏览器中应用。 但是,在 IE 中存在一些缺点( 例如 ! IE 。IE 不正确检测值属性,使用标记的内容作为值。 无论是否单击按钮,表单中的所有值都将发送到 server-side 。 这使得使用它成为一个 <button type="submit"> 难题和痛苦。

另一方面,<input type="submit"> 没有任何值或者检测问题,但是你不能像 <button> 那样添加 HTML 。 风格也比较难,而且样式在所有浏览器中都不总是响应。 希望这有助于。

...