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操作userdata
Apr 27 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue中echarts3.0自适应的方法
Feb 26 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语法(5)
2006/10/09 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
红旗方阵解说词
2014/02/12 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
国际会计专业求职信
2014/08/04 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
家长高考寄语
2015/02/27 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
债务追讨律师函
2015/06/24 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
导游词之河北野三坡
2019/12/11 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang