The difference between button and input type=button and precautions

<button> tag <br />Definition and usage
The <button> tag defines a button.
Inside the button element, you can place content such as text or an image. This is the difference between this element and a button created using the input element.
Compared with <inputtype="button">, the <button> control provides more powerful functions and richer content. Everything between the <button> and </button> tags is the content of the button, including any acceptable body content, such as text or multimedia content. For example, we can include an image and related text in the button and use them to create an attractive label image in the button.
The only prohibited element is an image map, because its mouse- and keyboard-sensitive actions would interfere with the behavior of the form buttons.
Always specify a type attribute for buttons. The default type for Internet Explorer is "button", while the default in other browsers (including the W3C specification) is "submit".
Browser Support <br />The <button> tag is supported by all major browsers.
Important : If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between <button> and <button/>, while other browsers will submit the contents of the value attribute. To create a button, use the input element in an HTML form.
Notes <br />When using the <button> tag, it is easy to take it for granted that it is used as <inputtype="button">, which can easily lead to the following incorrect usage:
1. Get the value of <buttonid="customBtn"value="test">button</button>value through $('#customBtn').val(). In IE (IE kernel), the value obtained is "button" instead of "test", and in non-IE, the value obtained is "test". Refer to the first sentence highlighted in red above.
This should be distinguished from <inputtype="button">.
Through these two methods $('#customBtn').val(), $('#customBtn').attr('value') get the value in different browsers, as follows:

Browser/Value	$('#customBtn').val()	$('#customBtn').attr('value')
Firefox 13.0	test	test
Chrome 15.0	test	test
Opera11.61	test	test
Safari 5.1.4	test	test
IE9.0	Button	Button

This can be verified by testing the following code

Copy code

The code is as follows:

<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
<scripttype="text/javascript">
$(function(){
$('#test1').click(function(){
alert($('#customBtn').attr('value'));
});
$('#test2').click(function(){
alert($('#customBtn').val());
});
});
</script>
</head>
<body>
<buttonid="customBtn"value="test">按钮</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</body>
</html>

2. If you accidentally put the <button> tag in the <form> tag, you will find that clicking this button becomes a submit, which is equivalent to <inputtype="submit"/>
Please refer to the second sentence highlighted in red above to understand what it means.
Don't treat the <button> tag as an input element in a <form>.
This can be verified by testing the following code

Copy code

The code is as follows:

<html>
<body>
<formaction="">
<button>button</button>
<inputtype="submit"value="inputsubmit"/>
<inputtype="button"value="inputbutton"/>
</form>
</body>
</html>

<<: Building the User Experience

>>: Detailed steps for installing and using vmware esxi6.5

How to use Javascript to generate smooth curves

Recommend

MySQL 8.0.24 version installation and configuration method graphic tutorial

This article records the installation and configu...

Steps for Django to connect to local MySQL database (pycharm)

Step 1: Change DATABASES in setting.py # Configur...

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

Preface After installing MySQL and Navicat, when ...

The difference between button and input type=button and precautions

How to use Javascript to generate smooth curves

Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

Detailed explanation of the Svelte implementation principle for simple and easy JavaScript development

In-depth understanding of the use of r2dbc in MySQL

JavaScript to achieve the idea of snake game

Implement 24+ array methods in JavaScript by hand

Small problem with the spacing between label and input in Google Browser

Linux user and group command example analysis [switching, adding users, permission control, etc.]

Summary of 10 amazing tricks of Element-UI

Web design skills: iframe adaptive height problem

Recommend

MySQL 8.0.24 version installation and configuration method graphic tutorial

Steps for Django to connect to local MySQL database (pycharm)

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

MySQL data type optimization principles

Differentiate between null value and empty character ('') in MySQL

The best explanation of HTTPS

Vue implements image dragging and sorting

Web Design Skills: High Ranking Problems of Mixed Chinese and English Web Pages

Detailed explanation of mysql permissions and indexes

How to quickly modify the host attribute of a MySQL user

MySQL transaction concepts and usage in-depth explanation

Analysis of MySQL lock mechanism and usage

MySQL slow_log table cannot be modified to innodb engine detailed explanation

HTML+CSS to achieve text folding special effects example

A brief understanding of the relevant locks in MySQL