欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

input的button和submit的区别

程序员文章站 2022-05-23 15:54:29
...

故事由来:

  其实这个问题,昨天已经遇到过,但是昨天是公司的一枚老员工帮助我这个实习生调的,而且我也确(猜)定(测)那枚老员工也不知道这个区别。然后今天又遇到相同问题。

故事梗概:

  现在公司里面做一个项目,用到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 是提交表单

  ②button是按钮,他是纯的按钮,如果不在按钮上加上操作,点击没有任何反应,只有加上类似type="submit" onclick="xxx()"才能起到按钮提交的作用。


  所以,按照软件设计模式的大原则---单一职责原则,建议用button来作为按钮,而少用input作为提交按钮,input按钮应该作为数据的输入来使用。

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