input type ="submit"Vs按钮标签是否可以互换？

Question

input type ="submit"Vs按钮标签是否可以互换？

Jit*_*yas 217 html w3c accessibility web-standards semantic-markup

input type="submit"和button标签是可以互换的吗？或者如果有任何差异那么何时使用input type="submit"何时button？

如果没有区别那么为什么我们有2个标签用于相同的目的？

Answer 1

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

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

所以只有功能才可以互换!

(不要忘记,type="submit"是默认值button,所以请关闭它!)

这就是W3C所说的但是我很确定我已经看到`type`默认为`button`的情况.我更喜欢显式化每个属性以避免任何浏览器不一致. (7认同)
请注意,IE6会提交页面上所有按钮的值,这使得很难准确确定单击了哪个按钮.说明:http://www.vancelucas.com/blog/ie6-and-multiple-button-submit-elements/ (6认同)
只是因为你没有_have_使用`type ="submit"`和按钮,因为`type`的默认值是`submit`. (6认同)
根据参考是.但并非所有浏览器都坚持参考规格,对吧？ (5认同)
@chharvey，前者不能有子节点；即非文本内容。我想您可以说，除了简洁之外，后者也没有理由存在。 (2认同)

Answer 2

the*_*mer 64

这<input type="button">只是一个按钮,不会自己做任何事情.的<input type="submit">,当一个表单元素内点击后会提交表单.

另一个有用的"特殊"按钮是<input type="reset">清除表单.

问题是关于`<input>`和`<button>`标签.您在答案中提供了有关`<input>`的有用信息,但它没有`<button>`侧. (7认同)
问题是按钮标签不是<input type ="button"> (5认同)

Answer 3

rol*_*lfk 40

使用<button>标签代替<input type ="button"..>.这是bootstrap 3中的建议做法.

http://getbootstrap.com/css/#buttons-tags

"跨浏览器渲染

作为最佳实践,我们强烈建议尽可能使用<button>元素以确保匹配跨浏览器呈现.

除此之外,还有一个Firefox错误阻止我们设置基于<input>的按钮的行高,导致它们与Firefox上其他按钮的高度不完全匹配.

+1为此.``button``更明确,并附带``aria``辅助功能,并且更容易设计风格.它也是前瞻性思维,因为它是HTML5. (3认同)

Answer 4

use*_*980 30

虽然这两个元素在功能上都提供相同的结果*,但我强烈建议您使用<button>:

更加明确和可读. input建议控件可编辑,或者可由用户编辑; button在服务目的方面更为明确
更容易在CSS中设计风格; 如上所述,FIrefox和IE有些怪癖input[type="submit"]在某些情况下无法正确显示
可预测的请求:当在POST/ GETrequest中向服务器提交值时,IE具有非常行为
标记友好; 您可以在按钮内嵌套项目,例如图标.
HTML5,前瞻性思维; 作为开发人员,一旦官方化,我们有责任采用新规范.HTML5,截至目前,已经正式使用了一年多,并且在许多情况下已被证明可以提高SEO.

*_{除了默认情况下没有指定的行为.<button type="button">}

总之,我强烈反对使用<input type="submit" />.

谢谢。我一直在寻找这个，特别是 HTML5 语义点。2020 年，我们的思考必须超越纯粹的功能。 (2认同)

Answer 5

Jar*_* Ng 24

<input type='submit' />不支持其中的HTML,因为它是一个自动关闭标记.<button>另一方面,支持内部的HTML,图像等,因为它是一个标签对:<button><img src='myimage.gif' /></button>.<button>在CSS样式方面也更灵活.

缺点<button>是旧浏览器不完全支持它.例如,IE6/7无法正确显示.

除非你有一些特定的理由,否则最好坚持下去<input type='submit' />.

@nailer您完全有权发表自己的观点，但是任何答案都将不可避免地参考当前的技术状态。也许HTML 6将弃用<< button>`，而采用一些新的东西。这是否意味着我们根本不应该在答案中提及特定的标签，因为它可能在将来的某个时候发生变化？我宁愿把它留给读者作为练习，以确定答案如何适用于他们的情况。只要这些信息对读者有价值，我认为包含这些信息就没有问题。 (2认同)
@nailer没有普遍的"过时"浏览器列表,每个人都遵守.不同的工作场所对支持的浏览器有不同的要求.仅仅因为2011年你支持的浏览器标准不包括IE6/7并不意味着无处不在. (2认同)
我知道没有通用的“过时”浏览器列表 - 因此并不是每个人都提到这样的事情。我想说的是，这可能更好地表述为“IE6/7 不支持正确显示按钮。如果这是一个问题，请坚持输入”即，你知道浏览器会改变，请考虑它。这可以阻止 StackOverflow 在 IE6 解决方法中永远暂停。 (2认同)

Answer 6

小智 11

我意识到这是一个老问题,但我在mozilla.org上发现了这个问题并认为它适用.

按钮可以有三种类型:提交,重置或按钮.单击提交按钮可将表单的数据发送到由元素的action属性定义的Web页面.

单击重置按钮会立即将所有表单小部件重置为其默认值.从用户体验的角度来看,这被认为是不好的做法.

点击按钮按钮就可以......没有!这听起来很愚蠢,但使用JavaScript构建自定义按钮非常有用.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

因为您可以通过Javascript将处理程序挂钩到click事件 (4认同)

Answer 7

Aca*_*uza 10

<button>比它更新<input type="submit">,更具语义,更容易风格化并支持HTML内部.

Answer 8

L84*_*L84 7

而其他的答案是巨大的,回答这个问题有一点使用时要考虑input type="submit"和button.有了input type="submit"你不能在输入上使用 CSS伪元素,但你可以为一个按钮!

button在样式方面,这是在输入上使用元素的一个原因.

Answer 9

Iva*_*ych 5

我不知道这是一个错误还是一个功能，但我发现了一个非常重要的（至少在某些情况下）差异：<input type="submit">在您的请求中创建键值对，但<button type="submit">没有。在 Chrome 和 Safari 中测试。

因此，当您的表单中有多个提交按钮并且想知道单击了哪一个时 - 不要使用button，input type="submit"而是使用。

归档时间：	14 年前
查看次数：	124096 次
最近记录：	7 年，4 月前