The difference between button and input type = button

Time:2021-3-10

< button > label
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 button created with the input element.
The < button > control provides more powerful functions and richer contents than the < inputtype = “button” >. All contents between < button > and < / button > tags are button contents, 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 image mapping, because its mouse and keyboard sensitive actions interfere with the behavior of form buttons.
Always specify the type attribute for the button. The default type of Internet Explorer is “button”, while the default value of other browsers (including W3C specification) is “submit”.
Browser support
All mainstream browsers support < button > tags.
Important issues: 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 content of the value attribute. Use the input element in the HTML form to create the button.
matters needing attention
When using < button > tag, it is easy to take it for granted as < inputtype = “button” >, which is easy to produce the following wrong usage:
1. Through $(‘# custombtn’). Val(), we can get the value of < button id = “custombtn” value = “test” > button < / button > value
In IE (IE kernel), the value used in this way is “button”, not “test”. In non ie, the value is “test”. Take the first sentence marked red above.
This should be distinguished from < inputtype = “button” >.
Through these two ways, $(‘# custombtn’). Val(), $(‘# custombtn’). Attr (‘value ‘) can be obtained 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

Button

Button

You can verify this 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 into the < form > tag, you will find that clicking this button becomes a submission, which is equivalent to < inputtype = “submit” / >
See the second sentence marked with red above for the meaning.
Don’t treat the < button > tag as an input element in < form >.
You can verify this 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>