Definition and usage
<button> tag defines a button.
inside the button element, you can place content, such as text or an image. This is the difference between the element and the button created by using the INPUT element.
<button> controls provide more powerful functionality and richer content than <input type= "button" >. All content between <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 tag image in the button.
The only prohibited element is an image map because its mouse-and keyboard-sensitive actions interfere with the behavior of the form button.
Always specify the Type property for the button . The default type of Internet Explorer is "button", while the default value for other browsers, including the specifications, is "submit".
Browser support
All major browsers support <button> tags.
Important: If you use the button element in an HTML form , different browsers will submit different values. Internet Explorer submits the text between <button> and <button/>, while other browsers submit the contents of the Value property. Use the INPUT element in an HTML form to create a button.
Precautions
When using <button> tags It is easy to assume that <input type= "button" > is used, which can easily produce the following error usage:
1, through $ (' #customBtn '). Val () Gets the value of <button id= "custombtn" value= "Test" > button </button> value
In IE kernel, the use of the value is "button", instead of "test", non-IE get "test". Participate in the first sentence of the above red.
This should be separated from the <input type= "button" >.
In both ways $ (' #customBtn '). Val (), $ (' #customBtn '). attr (' value ') in the different browsers to get the values, 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 |
Button |
Button |
Verify that this can be tested in the following code
<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">& #x6309;& #x94AE;</Button> <inputtype= "button"ID= "Test1"value= "Get attr"/> <inputtype= "button"ID= "Test2"value= "Get Val"/> </Body></HTML>
2, inadvertently put <button> tags in the <form> tag, you will find that click on this button into a submission, equivalent to <input type= "Submit"/>
This point, see the second sentence above the red words will understand what the meaning.
Do not take the <button> tag as the input element in <form>.
Verify that this can be tested in the following code
<HTML><Body> <formAction=""> <Button>button</Button> <inputtype= "Submit"value= "Input Submit"/> <inputtype= "button"value= "input Button"/> </form></Body></HTML>
Transferred from: http://www.cnblogs.com/purediy/archive/2012/06/10/2544184.html
The difference between <button> and <input type= "button" >
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
