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:
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
Recommend
Two ways to visualize ClickHouse data using Apache Superset
Apache Superset is a powerful BI tool that provid...
Solution to the system abnormality (unable to boot) caused by upgrading glibc in Centos7
Table of contents Cause of the problem: Solution:...
Detailed explanation of two quick ways to write console.log in vscode
(I) Method 1: Define it in advance directly in th...
Installation tutorial of mysql8.0rpm on centos7
First, download the diagram 1. First uninstall th...
MySQL 8.0.21.0 Community Edition Installation Tutorial (Detailed Illustrations)
1. Download MySQL Log in to the MySQL official we...
MySql 8.0.16-win64 Installation Tutorial
1. Unzip the downloaded file as shown below . 2. ...
Mobile terminal adaptation makes px automatically converted to rem
Install postcss-pxtorem first: npm install postcs...
How to authorize remote connections in MySQL in Linux
Note: Other machines (IP) cannot connect to the M...
Vue implements paging function
This article example shares the specific code of ...
Detailed explanation of custom events of Vue components
Table of contents Summarize <template> <...
Example of implementing skeleton screen with Vue
Table of contents Skeleton screen use Vue archite...
Solution to Linux CentOS 6.5 ifconfig cannot query IP
Recently, some friends said that after installing...
Understand the implementation of Nginx location matching in one article
Since the team is separating the front-end and ba...
Detailed explanation of the solution to Ubuntu dual system stuck when starting
Solution to Ubuntu dual system stuck when startin...
MySQL functional index optimization solution
When using MySQL, many developers often perform f...