The difference and precautions between button and input type=button_HTML/Xhtml_Web page production

tag
Definition and usage The
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 button created using the input element.
control provides more powerful functions and richer content than . Everything between the and 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 associated text in a button and use them to create an attractive markup image in the button.
The only prohibited element is image mapping, as its mouse and keyboard-sensitive actions interfere with the behavior of form buttons.
Always specify the type attribute for buttons. The default type in Internet Explorer is "button", while the default in other browsers (including the W3C specification) is "submit".
Browser Support
All major browsers support the tag.
Important : If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between and , while other browsers will submit the content of the value attribute. Please use input elements in HTML forms to create buttons.
Notes
When using the tag, it is easy to take it for granted and use it as , which can easily lead to the following incorrect usages:
1. Get the value of the buttonvalue through $('#customBtn').val()
This is how it works under IE (IE kernel) The value obtained when using it is "button", not "test". The value obtained under non-IE is "test". Attend the first sentence marked in red above.
This should be distinguished from .
Through these two methods, $('#customBtn').val(), $('#customBtn').attr('value') obtains the value in different browsers, as follows:

Browser/Value	$('#customBtn').val()	$('#customBtn').attr('value')
Firefox13.0	test	test
Chrome15.0	test	test
Opera11.61	test	test
Safari5.1.4	test	test
IE9.0	按钮	按钮

Verify this by testing the code below

Copy the code

The code is as follows:

$(function(){
$('#test1').click(function(){
alert($('#customBtn').attr('value'));
});
$('# test2').click(function(){
alert($('#customBtn').val());
});
});



按钮

2. Inadvertently put the tag into the

tag. You will find that clicking this button becomes submission, which is equivalent to
See the second sentence marked in red above to understand what it means.
Do not treat the

tag as an input element in .
Verify this by testing the code below

Copy the code

The code is as follows:

button