The difference between input button and submit

Origin of the story:

　Actually, I have already encountered this problem yesterday, but yesterday an old employee of the company helped me, an intern, adjust it, and I also confirmed (guessed) that the old employee didn’t know the difference. . Then I encountered the same problem again today.

Story summary:

　 Now I am working on a project in my company, using the AngularJs framework. My boss gave me an interface service to call and test. After I deployed the project package to the local tomcat server, I started writing the front-end code. , from html to css to JavaScript (less used) to bootstrap, good. Now the front-end static interface is built. Then use the interface service provided by the boss to test. AngularJS is an MVVM framework. The typical one is two-way binding. After writing the relevant logic code, the interface will jump to itself nonsensically every time. I look at my code. If the response If it returns true, it should jump to the order interface, and if it returns false, it should jump to the login interface. In short, it does not jump to itself, which is really weird! Then I opened chrome's developer tools and found that I didn't go into the Angular function I wrote every time. Later, I checked that there was no problem with ng-model, and then I found that the input type was submit. I tried to change it to button, and alas, everything was ok. This puzzled me, so I wrote this essay to find out the truth.

Truth of the story:

　 In general: both input and button can be used as buttons, and both can submit data to the backend for backend processing.

　 Difference: ①Input is originally input, but after type="submit", it also plays the role of submission, so input is the submission form

<input type="submit" value="提交">

　②Button is a button, it is a pure button. If you don’t add an operation to the button, there will be no response when clicking. Only by adding something like type="submit" onclick="xxx()" can the button submit function be played.

<button type="submit">确定</button>

　Therefore, in accordance with the major principle of software design pattern - the single responsibility principle, it is recommended to use button as the button and less use of input as the submit button. The input button should be used as data input.

　The above content comes from an intern’s insights into learning front-end. If there is any inappropriateness, please point it out and thank you!