首页 > 代码库 > Html-button和input的区别

Html-button和input的区别

一、定义和用法

<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="http://www.mamicode.com/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 表单中创建按钮

 

 

Html-button和input的区别