html中input与button,Html-button和input的区别

一、定义和用法

 标签定义的是一个按钮

1、在 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 元素创建的按钮之间的不同之处；

2、  控件提供了更为强大的功能和更丰富的内容；

3、 与  标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

标签规定了用户可以在其中输入数据的输入字段

1、 元素在

元素中使用，用来声明允许用户输入数据的 input 控件；

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

二、相同之处

中 type=“button”   与   中 type=“button”  是一样的

中 type=“submit”  与   中 type=“submit” 是一样的

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

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

三、不同之处

如果在 HTML 表单中使用 button 元素，不设置type的情况下，不同的浏览器会提交不同的值。

IE将提交  与  之间的文本；

其他浏览器将提交 value 属性的内容。

例如：我们获取下他的val

Html：按钮

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

按钮

按钮

四、总结

因此，请始终为 元素规定 type 属性。因为不同的浏览器对 元素的 type 属性使用不同的默认值；

如果在 HTML 表单中使用 元素，不同的浏览器可能会提交不同的按钮值。因此请尽可能使用  在 HTML 表单中创建按钮

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

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

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

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

HTML中button和input button的区别

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

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

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

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

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

input button 与 submit 的区别

在表单中,我们会经常提交数据,通常使用进行提交数据, 另一种方式是使用

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

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

随机推荐

数据持久化之sqlite基本用法

一.ACID 即原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability). 原子性:整个事务中的所有操作,要么全部完成,要么全部不完 ...

一种奇特的DEDE隐藏后门办法

转自:http://www.91ri.org/6462.html   一种奇特的DEDE隐藏后门办法 单位某站用的dedecms,今天被某黑阔getshell了,提交到了wooyun. 为了还原黑阔入 ...

A Byte of Python (1)安装和运行

有两种方式构建软件设计:一种是把软件做得很简单以至于明显找不到缺陷:另一种是把它做得很复杂以至于找不到明显的缺陷. ——C.A.R. Hoare 获得人生中的成功需要的专注与坚持不懈多过天才与机会. ...

SilkTest天龙八部系列6-用open agent进行测试

SilkTest支持两种测试模式,一种是用classic agent,另一种就是用我们今天要介绍的open agent. open agent可以提供和classic agent差不多的录制回放功能. ...

iOS8中 UITableView section 分区头部视图不显示

最近自己使用了UITableView写了一个通讯录,但是在编写过程还算顺利,但是后来测试的时候,发现在iOS8中TableView的分区头不能正常显示,使用 - (NSString *)tableVi ...

xamarin android制作圆角边框

xamarin android制作圆角边框 效果图如下: 关键代码: drawable文件夹新建shape_corner_down.xml <?xml version="1.0&quo ...

Java EE的未来

http://www.infoq.com/cn/articles/enterprise-Java-opinion 作为InfoQ下一年编辑关注点审核工作的一部分,我们挑选了Java作为深入探讨的主题. ...

angr进阶(5)内存操作

angr也可以将符号写在内存里,控制内存中的值,结合任意位置开始有奇效,但就是慢sym-write p = angr.Project('./issue', load_options={"au ...

063 SparkStream数据接收方式

1.两种方式 2.Basic Source 由StreamingContext可以提供的API 上面做的wordcount中的方式就算是第一种方式. 3.Advanced Source 使用数据接收器 ...

Lua IDE工具-Intellij IDEA&plus;lua插件配置教程&lpar;Chianr出品&rpar;

Lua 编译工具IDE-Intellij IDEA 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Ch ...