Home  >  Article  >  Web Front-end  >  The difference between button and input in a form

The difference between button and input in a form

php中世界最好的语言
php中世界最好的语言Original
2018-03-19 09:23:372097browse

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:

## tags is the content of the button, including any acceptable body content, such as text or

multimedia

content.

tag specifies an input field in which users can enter data

The element is used within the

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:

, , ,

1. : When the user clicks this button, the form will send the form content according to the action attribute setting of the 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.

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"/> 用法相同

四、

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>

Note:

##When and

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!

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn