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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
用PHP实现多级树型菜单
2006/10/09 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
phpinfo的知识点总结
2019/10/10 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python 变量类型详解
2018/10/10 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python grpc超时机制代码示例
2020/09/14 Python
《石榴》教学反思
2014/03/02 职场文书
个人培训自我鉴定
2014/03/28 职场文书
岗位工作说明书
2014/07/29 职场文书
个人查摆剖析材料
2014/10/16 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书