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 相关文章推荐
JS获取后台Cookies值的小例子
Mar 04 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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实现的验证码文件类实例
2015/06/18 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js 自动播放的实例代码
2013/11/19 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python内置模块logging用法实例分析
2018/02/12 Python
深入浅析python with语句简介
2018/04/11 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
创业计划书详解
2019/07/19 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
HTML基础详解(下)
2021/10/16 HTML / CSS