input的button和submit的区别
故事由来:
其实这个问题,昨天已经遇到过,但是昨天是公司的一枚老员工帮助我这个实习生调的,而且我也确(猜)定(测)那枚老员工也不知道这个区别。然后今天又遇到相同问题。
故事梗概:
现在公司里面做一个项目,用到AngularJs框架,我的老大给了我一个接口服务,给我去调用和测试,我部署完项目的包在本地tomcat服务器后,开始写前端的代码,从html到css到JavaScript(用的少)到bootstrap,好。现在前端的静态界面搭出来了。然后用老大给的接口服务去测试,angularJS的是一个MVVM框架,典型就是双向绑定,然后写完相关逻辑代码后,每次界面都会无厘头的跳到自己,我看我的代码中,如果response返回的是true的话,应该是跳到order界面,而false的话是跳到login界面,总之就是不跳到自己,真是怪了!然后我打开chrome的开发者工具,发现每次都不走写的Angular的函数里。后来,检查出ng-model没问题,然后发现input的type是submit,我尝试改成button,哎哟喂,尽然一切都ok了。这让我百思不得其解,遂写这个随笔,找出事情真相。
故事真相:
总体上:有input和button都能当按钮使用,都能把数据提交到后端供后端处理。
不同点:①input本是输入,但是type="submit"后,也起到提交的作用,所以 input 是提交表单
<input type="submit" value="提交">
②button是按钮,他是纯的按钮,如果不在按钮上加上操作,点击没有任何反应,只有加上类似type="submit" onclick="xxx()"才能起到按钮提交的作用。
<button type="submit">确定</button>
所以,按照软件设计模式的大原则---单一职责原则,建议用button来作为按钮,而少用input作为提交按钮,input按钮应该作为数据的输入来使用。
以上内容来自一个实习生学习前端的感悟。不当之处,还请看客能指出,并在此多谢!
input的button和submit的区别的更多相关文章
- 表单提交中的input、button、submit的区别
1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type ...
- button 和 submit 的区别
表单提交中button和submit的区别submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮, ...
- input button 与 submit 的区别
在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...
- 在jQuery ajax中按钮button和submit的区别分析
在使用jQuery ajax的get方法进行页面传值,不能用submit,否则无刷新获取数据展示 点击submit提交按钮,sendPwd.php通过$_POST接收传过来的值,然后echo一段数据. ...
- 2014/4/18 ① button与submit的区别 ②现象 : 数据库中其他值可以取到 有的却取不到 解决 看获取时“#”有无
①<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会 发生. <input type=&quo ...
- type='button'和'submit'的区别
今天在对表单的项目进行删除时出现了问题,原因就出现在点击input按钮时,这个input属性是type='button'还是type='submit'. 代码大致如下: <script type ...
- from中buttone 和 input type="button" 区别
在做一个表单提交时碰到的问题, 1.js判断阻止表单提交,如果是form 里面的button的话,恭喜你,你要再换个写法了.<button type="submit" ... ...
- 表单提交:button input submit 的区别
http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践 ...
- [转]表单提交:button input submit 的区别
博客转自于 http://harttle.com/2015/08/03/form-submit.html ,同时自己做了稍微改动 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整 ...
随机推荐
- emWin(ucGUI)在PC机上模拟的按键响应多次解决办法 worldsing
emWin(ucgui) 在PC端的模拟器,默认的按键机制是"按抬都Msg",当在按下键盘时,会收到一个key值-1,在按键没有离开时一直维持,当按键松开时还发送一个key值-0的 ...
- UVaLive 7500 Boxes and Balls (数学)
题意:给定 n 个球,每次从每篮子里拿出来一个放在一个新篮子里,并移除相同的,按球的个数进行排序,问你用最多几个球能完成循环. 析:数学问题,很容易发现前n项和就是最多的球数,所以我们只要找最大的n项 ...
- JPBM4.4基础及数据库说明
JPBM4.4基础及数据库说明 对jBPM4.4数据库的几张表简单介绍: A.资源库和运行时表结构 JBPM4_DEPLOYMENT 流程定义表 ...
- C:内存分配、内存中五大区
1.内存的划分 (从高到低依次是: 栈区 . 堆区 .全局静态区 . 常量区 . 代码区 )栈区是系统自动回收,堆区是我们手动回收 2. 栈区 在函数内部定义的局部变量和数组.都存放在栈区, ...
- InnoDB存储引擎
[InnoDB和MyISAM区别][ http://jeck2046.blog.51cto.com/184478/90499] InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型, ...
- 基于Emgu cv的图像拼接(转)
分类: 编程 C# Emgu cv Stitching 2012-10-27 11:04 753人阅读 评论(1) 收藏 举报 在新版本的Emgu cv中添加了Emgu.CV.Stitching,这极 ...
- 第四章TPLINK 703n 重要恢复方法,非TTL串口连接
途中有一次为了试图能够在703N上挂载普通usb(可用空间只有2M多点),卸载了不少系统软件,甚至把UCI给卸载了,导致系统起来后没有SSH服务,只有DNS服务,几乎变砖.百般无奈下,终于找到有高人提 ...
- (剑指Offer)面试题35:第一个只出现一次的字符
题目: 在字符串中找出第一个只出现1次的字符,如输入“abaccdeff”,则输出b. 思路: 1.暴力遍历 从头开始扫描字符串中的每个字符,当访问某个字符时,取该字符与后面的每个字符相比较,如果没有 ...
- ie10中元素超出父元素的宽度时不能自动隐藏
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...
- 跨浏览器实现盒阴影(box-shadow)效果
现在流行的设计里总是使用了大量的阴影,看看Vista.win7里夸张的box阴影,mac里的阴影比比皆是.CSS3的box-shadow属性可以让我们轻松实现图层阴影效果,使我们可以不再总是依赖于使用 ...