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

Question

在查看大多数网站(包括SO)时,大多数网站使用:

<input type="button" />

代替:

<button></button>

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

Answer 1

• 这是一个描述差异的页面(基本上你可以将html放入一个<button></button>)
• 另一页描述了人们避免的原因<button></button>(提示:IE6)

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

虽然我们在谈论IE,但它有一些与按钮宽度相关的错误.当你试图添加样式时,它会神秘地添加额外的填充,这意味着你必须添加一个小小的黑客来控制事物.

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

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

从页面:

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

按钮元素 - W3C

Answer 4

在<button>元素内部,您可以放置​​内容,如文本或图像.

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

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

Answer 5

引用

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

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

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

Answer 6

在HTML手册中引用表单页面:

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

Answer 7

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

Answer 8

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

锚(<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参考.

Answer 9

<button>

• 默认情况下,如果它具有"type ="submit"属性
• 可以在没有形式和形式的情况下使用.
• 允许使用文字或HTML内容
• 允许使用css伪元素(如:之前)
• 标签名称通常对单个表单是唯一的

与

<input type='button'>

• type应设置为'submit'以表现为提交元素
• 只能用于表格.
• 只允许文字内容
• 没有css伪元素
• 与大多数表单元素(输入)相同的标记名称

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

Answer 10

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

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

Answer 11

如果你使用jQuery有很大的不同.jQuery知道输入上的事件多于按钮上的事件.在按钮上,jQuery只知道"点击"事件.在输入上,jQuery知道'click','focus'和'blur'事件.

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

Answer 12

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

由于<input type="button">视觉渲染不同于某种情况<a>或<span>在某些情况下使用类进行样式时我会避免使用它们.

值得注意的是,目前的最佳答案是在2009年写的.现在IE6并不是一个问题,因此<button type="submit">Wins</button>我眼中的造型一致性排在首位.

Answer 13

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

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

Answer 14

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