input的button和submit的区别

Posted 2020-08-09 java_iter

故事由来：

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

故事梗概：

　　现在公司里面做一个项目，用到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按钮应该作为数据的输入来使用。

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