Html-button和input的区别

1、定义和用法

<button> 标签订义的是一个按钮

    一、在 <button> 元素内部，您能够放置内容，好比文本或图像。这是该元素与使用 <input> 元素建立的按钮之间的不一样之处；

    二、 <button> 控件提供了更为强大的功能和更丰富的内容；

    三、<button> 与 </button> 标签之间的全部内容都是按钮的内容，其中包括任何可接受的正文内容，好比文本或多媒体内容。

<input> 标签规定了用户能够在其中输入数据的输入字段

    一、<input> 元素在 <form> 元素中使用，用来声明容许用户输入数据的 input 控件；

    二、输入字段可经过多种方式改变，取决于 type 属性。

 

2、相同之处

<input> 中 type=“button”   与  <button> 中 type=“button”  是同样的

<input> 中 type=“submit”  与  <button> 中 type=“submit” 是同样的

当<button>未处于<form>表单中时，其浏览器默认的type就是button，这个时候与input的type=“button”就是同样的接轨

而当<button>处于<form>表单中时，不一样的浏览器对 <button> 元素的 type 属性使用不一样的默认值，这个时候有所区分了

 

3、不一样之处

若是在 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	按钮	按钮

 

4、总结

    所以，请始终为 <button> 元素规定 type 属性。由于不一样的浏览器对 <button> 元素的 type 属性使用不一样的默认值；

    若是在 HTML 表单中使用 <button> 元素，不一样的浏览器可能会提交不一样的按钮值。所以请尽量使用 <input> 在 HTML 表单中建立按钮