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获取div高度的代码
Aug 09 Javascript
JavaScript Split()方法
Dec 18 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
深入浅出了解Node.js Streams
May 27 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
js实现飞机大战游戏
Aug 26 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
JS原生实现轮播图的几种方法
Mar 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
长波有什么东西
2021/03/01 无线电
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
smarty内置函数section的用法
2015/01/22 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
写js时遇到的一些小问题
2010/12/06 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
js实现随机抽奖
2020/03/19 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
2014年药品销售工作总结
2014/12/16 职场文书
小升初自荐信范文
2015/03/05 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python