HTML: <button> tag
This HTML tutorial explains how to use the HTML element called the <button> tag with syntax and examples.
Description
The HTML <button> tag is an element that represents a clickable button. This tag is also commonly referred to as the <button> element.
Syntax
In HTML, the syntax for the <button> tag is:
<body>
<button name="button">Click me</button>
</body>
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <button> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
autofocus | Boolean value indicating that the button should have input focus when the page is loaded, unless the user overrides it. | HTML5 |
disabled | Boolean value indicating that the user cannot interact with the button. | HTML 4.01, HTML5 |
form | Value indicating the form that owns the button. It is the Id of a <form> in the same document. | HTML5 |
formaction | URI of a program that will process the information submitted by the button. | HTML5 |
formenctype | Type of content that is used to submit the form to the server. It can be one of the following values: application/x-www-form-urlencoded multipart/form-data text/plain |
HTML5 |
formmethod | HTTP method that the browser uses to submit the form. It can be one of the following values: post, get post - means that the data from the form is included in the body of the form and is sent to the server get - means that the data from the form is appended to the URI with a '?' separator and the URI is then sent to the server |
HTML5 |
formnovalidate | Boolean value indicating that the form is not to be validated when it is submitted. | HTML5 |
formtarget | Name or keyword indicating where to display the response after submitting the form. It can be one of the following values: _self, _blank, _parent, _top _self - means that the response loads into the current frame or context _blank - means that the response loads into a new window or context _parent - means that the response loads into the parent frame or context _top - means that the response loads into the full, original window |
HTML5 |
name | Name of the button | HTML 4.01, HTML5 |
type | Type of the button. It can be one of the following values: submit, reset, button submit - means that the button submits the form data to the server (default value if type is not specified) reset - means that the button resets all of the controls button - means that the button has no default behavior |
HTML 4.01, HTML5 |
value | Initial value of the button | HTML 4.01, HTML5 |
Note
- The HTML <button> element is found within the <body> tag.
- The <button> tag can not be a descendant of an <a> tag.
Browser Compatibility
The <button> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <button> tag below, exploring examples of how to use the <button> tag in HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional.
Advertisements