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 的dialog和ztree结合实现步骤
Aug 02 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue动态设置页面title的方法实例
Aug 23 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制作静态网站的模板框架(四)
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php多进程应用场景实例详解
2019/07/22 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python实现点对点聊天程序
2018/07/28 Python
python小白切忌乱用表达式
2020/05/29 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
大学自我鉴定
2013/12/20 职场文书
连带责任保证书
2014/04/29 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python