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编程起步(第六课)
Jan 10 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
详解Javascript实践中的命令模式
May 05 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实现在线通讯录功能(附源码)
2016/05/13 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python切片工具pillow用法示例
2018/03/30 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
销售人员获奖感言
2014/02/05 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers