一、定义和用法
<button> 标签定义的是一个按钮
1、在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处；
2、 <button> 控件提供了更为强大的功能和更丰富的内容；
3、<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
<input> 标签规定了用户可以在其中输入数据的输入字段
1、<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件；
2、输入字段可通过多种方式改变，取决于 type 属性。
二、相同之处
<input> 中 type=“button” 与 <button> 中 type=“button” 是一样的
<input> 中 type=“submit” 与 <button> 中 type=“submit” 是一样的
当<button>未处于<form>表单中时，其浏览器默认的type就是button，这个时候与input的type=“button”就是一样的接轨
而当<button>处于<form>表单中时，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，这个时候有所区分了
三、不同之处
如果在 HTML 表单中使用 button 元素，不设置type的情况下，不同的浏览器会提交不同的值。
IE将提交 <button> 与 <button/> 之间的文本；
其他浏览器将提交 value 属性的内容。
例如：我们获取下他的val
Html：<button id="Btn" value="test">按钮</button>
JQ：$(\'#Btn\').val() $(\'#Btn\').attr(\'value\')
|
Browser/Value |
$(\'#customBtn\').val() |
$(\'#customBtn\').attr(\'value\') |
|
Firefox13.0 |
test |
test |
|
Chrome15.0 |
test |
test |
|
Opera11.61 |
test |
test |
|
Safari5.1.4 |
test |
test |
|
IE9.0 |
按钮 |
按钮
|
四、总结
因此，请始终为 <button> 元素规定 type 属性。因为不同的浏览器对 <button> 元素的 type 属性使用不同的默认值；
如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。因此请尽可能使用 <input> 在 HTML 表单中创建按钮