Home > Web Front-end > HTML Tutorial > The difference and precautions between button and input type=button

The difference and precautions between button and input type=button

yulia
Release: 2018-09-10 16:01:20
Original
3813 people have browsed it

The 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 the image map, as its mouse and keyboard-sensitive actions interfere with the behavior of the 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 , 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 value through $('#customBtn').val()
In IE When used in this way under (IE kernel), the value obtained is "button", not "test". Under non-IE, the value obtained 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:

The difference and precautions between button and input type=button

You can verify this by testing 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(){ 
$(&#39;#test1&#39;).click(function(){ 
alert($(&#39;#customBtn&#39;).attr(&#39;value&#39;)); 
}); 
$(&#39;#test2&#39;).click(function(){ 
alert($(&#39;#customBtn&#39;).val()); 
}); 
}); 
</script> 
</head> 
<body> 
<buttonid="customBtn"value="test">&#x6309;&#x94AE;</button> 
<inputtype="button"id="test1"value="getattr"/> 
<inputtype="button"id="test2"value="getval"/> 
</body> 
</html>
Copy after login

2. Inadvertently put the

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template