一、定义和用法

<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 表单中创建按钮

 

Html-button和input的区别的更多相关文章

  1. button 和input 的区别及在表单form中的用法

    先说一下button 和input的定义: <button> 标签定义的是一个按钮 1.在 <button> 元素内部,您可以放置任何内容,比如文本或图像.这是该元素与使用 & ...

  2. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  3. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  4. HTML中button和input button的区别

    button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...

  5. <button>和<input type="button"> 的区别

    <button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...

  6. <button>与<input type="button">的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  7. 表单提交中的input、button、submit的区别

    1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type ...

  8. input button 与 submit 的区别

    在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...

  9. 解析button和input type=”button”的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  10. 【转】解析<button>和<input type="button"> 的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

随机推荐

  1. C#限速下载网络文件

    代码: using System; using System.Collections.Concurrent; using System.Collections.Generic; using Syste ...

  2. 图表插件Charts.js的使用

    Charts.js的介绍自行百度 首先下载Charts.js,官网:http://chartjs.cn/ charts.js 托管在了github上,下载下来后加解压出src中的文件即可.其中有cha ...

  3. 智软科技医疗器械GSP监管软件通过多省市药监局检查

    提供医疗器械GSP监管软件,通过多省市药监局检查,符合2016年最新GSP监管条例的要求. 企业客户列表 温岭市万悦医疗器械有限公司 杭州市上善医疗器械有限公司 武汉明德生物科技股份有限公司 http ...

  4. 设计模式-策略模式(Strategy Model)

    1.概述     在开发过程中常常会遇到类似问题,实现一个功能的时候往往有多种算法/方法(策略),我们可以根据环境的不同来使用不同的算法或策略来实现这一功能.     如在人物比较排序的实现中,我们有 ...

  5. NodeJs端口被占用的情况

    在NodeJs运行的时候,我们往往会遇到一个问题:“端口被占用”,这个问题,我们的处理办法有哪些呢? 这里我只介绍一下linux下的方法: 1.使用nodeme(忘记是不是这个啦,回去查下,这个要安装 ...

  6. 获得设备的唯一标识符UDID

    在IOS5之后,苹果为避免根据UDID获得用户的信息,而禁止使用uniqueIdentifier获得UDID,但是仍有些应用需要根据UDID区分设备 有一个系统的库IOKit.framework可以获 ...

  7. 使用ViewPager切换Fragment时,防止频繁调用OnCreatView

    使用ViewPager切换Fragment,我原先使用系统自带的适配器FragmentPagerAdapter. 切换fragment时,频繁调用oncreatview(). 查看FragmentPa ...

  8. React Native知识10-ListView组件

    ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据 ...

  9. SQL优化技术分析-3:SQL语句索引的利用

    使用索引来更快地遍历表.默认情况下建立的索引是非聚集索引,但有时它并不是最佳的.在非聚集索引下,数据 在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说: 有大量重复 ...

  10. Oracle发送邮件,支持HTML,多收件人,多附件

    Oracle发邮件,权限问题 - 创建 ACL BEGIN DBMS_NETWORK_ACL_ADMIN.CREATE_ACL(acl => 'email_server_permissions. ...