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和ActionScript的交互实现代码
Aug 01 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JavaScrip数组去重操作实例小结
Jun 20 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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与paypal整合方法
2010/11/28 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
微信小程序云开发之数据库操作
2019/05/18 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
详解Django中Request对象的相关用法
2015/07/17 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python requests post多层字典的方法
2018/12/27 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python使用smtplib模块发送邮件
2020/12/17 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
出纳的岗位职责
2013/11/09 职场文书
《画家乡》教学反思
2014/04/22 职场文书
体育活动总结范文
2014/05/04 职场文书
社区重阳节活动总结
2015/03/24 职场文书
大客户经理岗位职责
2015/04/09 职场文书
修辞手法有哪些?
2019/08/29 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电