The difference between button and input in a form

The following four types of buttons are described in detail:

<form action="#">
    <input type="text" name="username"/><br/>
    <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/></form>

Copy after login

If you want to check the form data before submitting the data:

Returning false in the check function will prevent the default behavior of submit, that is, Prevent form data submission (prevent page refresh)

Note:

"return check()" Medium The return cannot be omitted

Ordinary buttons must be paired with JS to be useful, such asonclickEvents etc.

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
    <input type="button" value="提醒" onclick="remind()"/></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

Copy after login

<button type="submit"></button>表单数据提交按钮，与<input type="submit"/> 用法相同

Copy after login

Normal buttons are used the same as

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <button type="submit">登录</button>
    <button type="button"onclick="remind()">提醒</button></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

Copy after login

##When is not in the form, the browser’s default type is button;

When

is in a form, different browsers use different default values ​​for the type attribute of the element;

Therefore, it is recommended to always set the type value for the button.

To summarize:

##

, used as form data submission button, the page will be refreshed by default;

##

and

What are the steps for jest to test react native components

Detailed explanation of implicit calls in javascript

JS adds new element node

The above is the detailed content of The difference between button and input in a form. For more information, please follow other related articles on the PHP Chinese website!