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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
非常好用的Zend Framework分页类
2014/06/25 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python实现两款计算器功能示例
2017/12/19 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python3实现购物车功能
2018/04/18 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Python运算符+与+=的方法实例
2021/02/18 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
铁路安全事故反思
2014/04/26 职场文书
民政局个人整改措施
2014/09/24 职场文书
党员公开承诺书2015
2015/01/21 职场文书
导师工作推荐信
2015/03/27 职场文书
工程质检员岗位职责
2015/04/08 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis