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

The difference and precautions between button and input type=button

yuliaOriginal: 2018-09-10 16:01:203774browse

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>

2. Inadvertently put the

<html> 
<body> 
<formaction=""> 
<button>button</button> 
<inputtype="submit"value="inputsubmit"/> 
<inputtype="button"value="inputbutton"/> 
</form> 
</body> 
</html>

The above is the detailed content of The difference and precautions between button and input type=button. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：What does lazy loading of images mean? How to implement lazy loading of imagesNext article：What does lazy loading of images mean? How to implement lazy loading of images

See more

The difference and precautions between button and input type=button

Related articles