Home >Web Front-end >H5 Tutorial >What is the difference between button button and submit button?

What is the difference between button button and submit button?

不言
不言forward
2019-01-08 10:43:335294browse

This article brings you what is the difference between the button button and the submit button? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

button-normal button, submit-submit button.
Submit is a special case of button and a type of button. It automatically integrates the action of submission. Both submit and button are displayed in the form of buttons. They both look like buttons. The difference is the type attribute. and respond to events.

Usage scenarios:

Some of the usage scenarios mentioned here do not mean that only one type can be used. It just means that it is more convenient to use in this scenario and the programmer's workload is small.

Use the table to compare:

##Partial refresh√ cannot be used. The form will be submitted when the event is triggered. There is no form, but data must be submittedBut the button does not submit any data by default. Data can be submitted by binding events. When submit requires a form, the data will be included when submitting. Of course, you can also use submit, but the onclick event must be intercepted. When there is too much form dataNeed to write a lot of data acquisition actionsRecommendation Submitting data must be verified using JS, but if the user disables JS at this time, the verification will be invalid. If verification is not performed in the background, illegal data will enter the background. Recommendation: Submit data through button, then if the user disables JS, then the data submission action cannot be activatedNot recommendedSupplementary
Scenario button submit
The web page needs to submit information to the server
Execute a common event on the web page, such as reset, Clear function.
Submit the form You need to bind events to submit the form data
1. In the above scenario, if the form needs to be processed with JS (including input verification) after clicking the submit button and then submitted, we usually recommend using button. If you need to use submit for pre-submission verification, you should add return before the method. If the onClick method does not add return, it will automatically submit and will not act as a constraint. Therefore, if you need to verify when using submit, please add return true or false.

For example, a login module, first verify whether the user name is empty. If it is empty, the page specified by the from form will never be submitted when SUBMIT is clicked. It can only be sent in form! And the value passed in cannot be verified on the page specified by the form.

function check(){
   var name = document.getElementById("name").value;
   if(name ==  null || name == ''){
        alert("用户名不能为空");   
        return false;
   }
   return true;
}


<form name="form" action="跳转的页面" method="post"  onsubmit="return check()">
  <input type="text" id="name"/>
  <input type="submit" value="提交"/>

The above is the detailed content of What is the difference between button button and submit button?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete