The difference between button and input in a form

This time I will bring you the difference between button and input in the form. What are the precautions for using button and input in the form? The following is a practical case, let's take a look.

Let’s talk about the definitions of button and input first:

##<button> The label defines a button

1 , inside the <button> element you can place any content, such as text or images. This is the difference between this element and the button created using the <input> element;

2. The <button> control provides more powerful functions and richer content;

3. All content between the <button> and </button> tags is the content of the button, including any acceptable body content, such as text or

multimedia

content.

<input> tag specifies an input field in which users can enter data

The <input> element is used within the <form> element to Declare an input control that allows users to enter data; the specific input type depends on the type attribute

The following four types of buttons are described in detail:

<input type="submit"/>, <input type= "button"/>, <button type="submit"></button>, <button type="button"></button>

1. <input type="submit"/>: When the user clicks this button, the form will send the form content according to the action attribute setting of the <form> tag. When clicked, the page will refresh

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

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:

onsubmit=

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

2.

<input type="button"/>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>

三、

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

四、

<button type="button"></button>Normal buttons are used the same as <input type="button"/>

<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>

Note:

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

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

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

To summarize:

##<button type="submit"></button&gt ; Same usage as <input type="submit"/>, used as form data submission button, the page will be refreshed by default;

• ## <button type="button"></button> and

  <input type="button"/>
have the same usage. They are both ordinary buttons and the page will not be refreshed by default. .

• # I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

  Recommended reading:

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!