The difference between button and input type=button and precautions

<button> tag

Definition and usage

The <button> tag defines a button.

Inside the button element, you can place content, such as text or images. This is the difference between this element and the buttons created with the input element.

The <button> control provides more powerful features and richer content than <inputtype=button>. All content between the <button> and </button> tags is the content of the button, which includes 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 markup image in the button.

The only element that is prohibited is image mapping, because its mouse- and keyboard-sensitive actions can interfere with the behavior of form buttons.

Please always specify type attributes for the button. The default type of InternetExplorer is button, while the default value in other browsers (including the W3C specification) is submit.

Browser support

All mainstream browsers support the <button> tag.

Important : If you use the button element in an HTML form, different browsers will submit different values. InternetExplorer will submit text between <button> and <button/>, while other browsers will submit contents of the value attribute. Please use the input element in the HTML form to create a button.

Things to note

When using the <button> tag, it is easy to take it for granted as <inputtype=button>, which can easily lead to the following error usage:

1. Get the value of the <buttonid=customBtnvalue=test> button</button>value through $('#customBtn').val()

In IE (IE kernel), the value is the button, not the test, and the test is obtained in non-IE. Participate in the first sentence marked above.

This should be distinguished from <inputtype=button>.

In these two ways $('#customBtn').val(), $('#customBtn').attr('value') gets the values ​​in different browsers, as follows:

Browser/Value	$('#customBtn').val()	$('#customBtn').attr('value')
Firefox13.0	test	test
Chrome 15.0	test	test
Opera11.61	test	test
Safari5.1.4	test	test
IE9.0	Button	Button

Verify this in the test code below

Copy the code