JS中type="button"和type="submit"的区别


Posted in Javascript onJuly 04, 2017

Submit是专门用于提交表单的Button,与Button的区别主要有两点:

type=button 就单纯是按钮功能 

type=submit 是发送表单

(1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此

(2)表单提交时,所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交,除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。

但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:

使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

执行完onClick,跳转文件在 js文件里控制。提交需要onClick。 

比如:

1,onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。

 讲白一些,就是submit会有一个跳转,页面会刷新;而button不会刷新,就是一个button;可以用<button type="submit/button/reset"></button>来生成按钮,更加灵活,样式更好控制。  

以上所述是小编给大家介绍的JS中type="button"和type="submit"的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 #Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 #Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 #Javascript
原生js实现简单的链式操作
Jul 04 #Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
使用vue构建一个上传图片表单
Jul 04 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
javascript 继承实现方法
2009/08/26 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jquery处理json对象
2014/11/03 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python版大富翁源代码分享
2018/11/19 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
公司董事长职责
2013/12/12 职场文书
党委领导班子整改方案
2014/09/30 职场文书
降价通知函
2015/04/23 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书