<button> vs. <input type=“button” />. Which to use?
当查看大多数站点(包括SO)时,大多数站点使用:
1 | <input type="button" /> |
而不是:
1 | <button></button> |
- 两者之间的主要区别是什么,如果有的话?
- 是否有正当理由使用其中一个而不是另一个?
- 是否有合理的理由使用合并它们?
- 使用
是否会带来兼容性问题,因为它的使用并不十分广泛?
- 这是一个描述差异的页面(基本上,您可以将HTML放入
中) - 另一页描述了人们为什么避开
(提示:ie6)
使用
And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.
正如旁注,
编辑-更多详细信息
没有类型,
一个按钮支持三种类型
1 2 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" |
这篇文章似乎提供了一个很好的差异概述。
从页面:
Buttons created with the BUTTON element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities: the BUTTON element may
have content. For example, a BUTTON
element that contains an image
functions like and may resemble an
INPUT element whose type is set to
"image", but the BUTTON element type
allows content.The Button Element - W3C
在
1 | <button type="button">Click Me!</button> |
这是此元素与使用
引用
Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the
and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
发件人:http://www.w3schools.com/tags/tag_button.asp
如果我理解正确,答案就是兼容性和从浏览器到浏览器的输入一致性。
我将引用文章锚定、输入和按钮之间的区别:
锚(
输入(
按钮(
- 可以在按钮中嵌套元素,如图像、段落或报头;
- 按钮还可以包含
::before 和::after 伪元素; - 按钮支持
disabled 属性。这使转弯很容易他们断断续续。
再次检查MDN或W3学校上的
如果要在窗体中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,请使用按钮标记。
引用HTML手册中的表单页面:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to"image", but the BUTTON element type allows content.
如果您使用的是jquery,则会有很大的不同。jquery比按钮知道更多的输入事件。在按钮上,jquery只知道"click"事件。在输入端,jquery知道"click"、"focus"和"blur"事件。
您可以随时根据需要将事件绑定到按钮,但请注意jquery自动意识到的事件是不同的。例如,如果您创建了一个函数,当您的页面上出现"focusin"事件时执行该函数,则输入将触发该函数,但按钮不会。
1 | <button> |
- 默认情况下,其行为类似于具有"type="submit"属性
- 可以在没有窗体的情况下使用,也可以在窗体中使用。
- 允许文本或HTML内容
- 允许使用CSS伪元素(如:before)
- 标记名对于单个表单通常是唯一的
VS
1 | <input type='button'> |
- 类型应设置为"submit"以作为提交元素。
- 只能在窗体中使用。
- 仅允许文本内容
- 没有CSS伪元素
- 与大多数表单元素(输入)相同的标记名
——在现代浏览器中,这两个元素都可以很容易地用css设置样式,但在大多数情况下,由于您可以用内部HTML和伪元素设置更多样式,因此首选
就CSS样式而言,
由于
值得一提的是,目前最热门的答案是在2009年写的。IE6现在已经不是一个问题了,所以我的眼睛里的
另一方面,
我只想在剩下的答案中加些东西。输入元素被视为空元素或空元素(其他空元素包括area、base、br、col、hr、img、input、link、meta和param)。您也可以在这里查看),这意味着它们不能包含任何内容。除了没有任何内容之外,空元素不能有像::after和::before这样的伪元素,我认为这是一个主要缺点。
另外,其中的一个区别可能来自库的提供者,以及它们编码的内容。例如,在这里,我将Cordova平台与Mobile Angular UI结合使用,当input/div/etc标记与ng click一起工作良好时,按钮可能会导致Visual Studio调试器崩溃,当然是由于程序员造成的差异;请注意,mattc answer指向相同的问题,jquery只是一个lib,而提供者没有想到一个元素上的一些功能,在另一个元素上提供。因此,当您使用库时,可能会遇到一个元素的问题,而不会遇到另一个元素。简单地说,像