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

Question

有很多关于他们的传说.我想知道真相.以下两个例子之间有什么区别？

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

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

Answer 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>上面解释的标记外,所有浏览器都会提交value-attribute .

Answer 2

使用<button>,您可以使用文本所在的img标签等

<button type='submit'> text -- can be img etc.  </button>

对于<input>类型,您仅限于文本