The difference between button and input in a form-JS Tutorial-php.cn

Table of Contents

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

Copy after login

" >

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

Copy after login

Home

Web Front-end

JS Tutorial

The difference between button and input in a form

php中世界最好的语言

Mar 19, 2018 am 09:23 AM

button input the difference

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>

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:

onsubmit=

"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

三、四、

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

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!

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7934

Java Tutorial

1652

CakePHP Tutorial

1412

Laravel Tutorial

1303

PHP Tutorial

1250

Related knowledge

How to set password protection for export PDF on PS Apr 06, 2025 pm 04:45 PM

Export password-protected PDF in Photoshop: Open the image file. Click "File"> "Export"> "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.

The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Apr 05, 2025 pm 01:03 PM

The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...

Difference between centos and ubuntu Apr 14, 2025 pm 09:09 PM

The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)

How to use XPath to search from a specified DOM node in JavaScript? Apr 04, 2025 pm 11:15 PM

Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...

What are the different ways of promoting H5 and mini programs? Apr 06, 2025 am 11:03 AM

There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.

What is the difference between syntax for adding columns in different database systems Apr 09, 2025 pm 02:15 PM

不同数据库系统添加列的语法为：MySQL：ALTER TABLE table_name ADD column_name data_type;PostgreSQL：ALTER TABLE table_name ADD COLUMN column_name data_type;Oracle：ALTER TABLE table_name ADD (column_name data_type);SQL Server：ALTER TABLE table_name ADD column_name data_

Where is the C language function library? How to add the C language function library? Apr 03, 2025 pm 11:39 PM

The C language function library is a toolbox containing various functions, which are organized in different library files. Adding a library requires specifying it through the compiler's command line options, for example, the GCC compiler uses the -l option followed by the abbreviation of the library name. If the library file is not under the default search path, you need to use the -L option to specify the library file path. Library can be divided into static libraries and dynamic libraries. Static libraries are directly linked to the program at compile time, while dynamic libraries are loaded at runtime.

See all articles

The difference between button and input in a form

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

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

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics

The difference between button and input in a form

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

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

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

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics

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

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