一尘不染

<input type ='submit'/>和<button type ='submit'> text </ button>之间的区别

html

关于它们有很多传说。我想知道真相。以下两个示例之间有什么区别?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>


阅读 344

收藏
2020-05-10

共1个答案

一尘不染

不确定从何处获得传说,但:

提交按钮 <button>

与:

<button type="submit">(html content)</button>

IE6将在标记之间提交此按钮的所有文本,其他浏览器将仅提交值。使用<button>可使您在按钮的设计上享有更大的布局自由度。从各种意图和目的看,它乍一看似乎很棒,但是各种浏览器怪癖使它有时很难使用。

在您的示例中,IE6将发送text到服务器,而其他大多数浏览器将不发送任何内容。要使其跨浏览器兼容,请使用<button type="submit" value="text">text</button>。更好的是:不要使用该值,因为如果添加HTML,则在服务器端收到的内容将变得非常棘手。相反,如果必须发送额外的值,请使用隐藏字段。

带按钮 <input>

与:

<input type="button" />

默认情况下,这几乎不执行任何操作。它甚至不会提交您的表格。您只能在按钮上放置文本,并通过CSS为其指定大小和边框。其最初(当前)的意图是执行脚本,而无需将表单提交给服务器。

正常提交按钮,带有 <input>

与:

<input type="submit" />

像前者一样,但实际上提交了周围的表格。

图片提交按钮 <input>

与:

<input type="image" />

像前一个(提交)一样,它也将提交一个表单,但是您可以使用任何图像。这曾经是需要提交表单时将图像用作按钮的首选方式。为了获得更多控制,<button>现在使用。这也可以用于
服务器端图像映射, 但是如今这很少见。当您使用usemap-attribute和(带有或不带有该属性)时,浏览器会将鼠标指针的X /
Y坐标发送到服务器(更精确地说,是单击按钮时鼠标指针在按钮内的位置)。如果您只是忽略这些额外功能,那无非就是伪装成图像的提交按钮。

浏览器之间有一些细微的差异,但是除了上述<button>标记外,所有浏览器都将提交值属性。

2020-05-10