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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
JS 基本概念详细介绍
Oct 16 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
php header示例代码(推荐)
2010/09/08 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php创建类并调用的实例方法
2019/09/25 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python中文字符串截取问题
2015/06/15 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
2013年研究生毕业感言
2014/02/06 职场文书
职位说明书范文
2014/05/07 职场文书
网络营销计划
2015/01/17 职场文书
物业项目经理岗位职责
2015/04/01 职场文书