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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
js自制图片放大镜功能
Jan 24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
node.js通过url读取文件
Oct 16 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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 数学运算验证码实现代码
2009/10/11 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Python实现多进程共享数据的方法分析
2017/12/04 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
车间班组长岗位职责
2013/11/13 职场文书
前台接待岗位职责
2013/12/03 职场文书
广告词串烧
2014/03/19 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
九年级化学教学反思
2016/02/22 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript