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按钮应该作为数据的输入来使用。

  以上内容来自一个实习生学习前端的感悟。不当之处,还请看客能指出,并在此多谢!

时间: 2024-10-23 07:39:19

input的button和submit的区别的相关文章

表单提交中的input、button、submit的区别(转来学习)

最近项目中用了很多的表单提交,发现input.button.submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别. 1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type="submit" value="提交"> </form> 其中点击按钮后的url变为?name=22222222

表单提交中的input、button、submit的区别

参考博文:http://www.cnblogs.com/shytong/p/5087147.html 设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认值是Submit. form[method]默认值为GET,所以提交后会使用GET方式进行页面跳转. input[type]默认值为text,所以第一个input显示为文本框. 我这里只想说一点就是button默认的type类型是submit. 如果想进行表单校验的话,type类型可以写成button,但是这个

button 和 submit 的区别

表单提交中button和submit的区别submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上.      1. 如果表单在点击提交按钮后需要用js进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button 如果需要使用submit提交前验证的话 应在方法前加return 如一个登陆模块,先验证用户名是否为空,如果为空,SUBMIT

input button 与 submit 的区别

在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<button></button>按钮,在表单中它的默认类型是submit, 也可以提交数据 但是与<input type="button"/> 不同,这个就仅仅是一个按钮,无法自动地在提交表单,但也可以结合JS来实现提交. --------------------

2014/4/18 ① button与submit的区别 ②现象 : 数据库中其他值可以取到 有的却取不到 解决 看获取时“#”有无

①<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会 发生. <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻 止它. <button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文 字,还可以有图片等多媒体内容.(当然,前两个用图片背景也可以做到)

在jQuery ajax中按钮button和submit的区别分析

在使用jQuery ajax的get方法进行页面传值,不能用submit,否则无刷新获取数据展示 点击submit提交按钮,sendPwd.php通过$_POST接收传过来的值,然后echo一段数据.然而却始终无法显示传回来的值.原因在这里: 提交按钮的类型是submit,点击之后毫无反应.因为无意发现有次点击瞬间结果出来了,又变回去了,于是发现诡异,上网一查,发现大部分都把按钮设置成button类型,于是改成button之后,问题解决了. 按钮button和submit有什么区别呢? subm

表单提交:button input submit 的区别

http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践.先给结论: 建议使用button[type=submit]来提交表单,而不是input: 只有单行文本控件时,回车会引发表单提交: 通过onsubmit事件可阻止表单提交. input[type=submit] 这是最常见的提交方式.不多说了,看图: 图中可以看到点击提交按钮后的URL是/?key

在javascript中关于submit和button提交表单区别

原文:在javascript中关于submit和button提交表单区别 原文来自:http://www.jb51.net/article/42236.htm submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. 1. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的

ASP.NET控件&lt;ASP:Button /&gt; html控件&lt;input type=&quot;button&quot;&gt;区别联系

ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样的东西 服务器只认识input,我们可以直接写input 但是asp是要把自己自动翻译成input再交给服务器的.其实是一样的东西 写写我看到的区别:                asp控件,直接可以用c#编程                input加上 runat=“server” 也被c#编程了 说白