HTML <button> (Form Button) Tag
Example
<button type="button">Click Me!</button>Meaning
The <button> element defines a clickable button that may contain arbitrary content to augment what the standard <input type="button"> provides.
Within a <button> element you can include text or elements like <i>, <b>, <strong>, <br>, <img>, etc... That is not possible with a button created with the <input> element.
Note: Always specify the type attribute for a <button> element.
Version: HTML 4, 4.01, 5
Standard Syntax
<button type="button|reset|submit">text</button>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | This is Boolean attribute is used for autofocus when the page loads. |
| autocomplete | on off |
This attribute on a <button> is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting autocomplete="off" on the button disables this feature. |
| disabled | disabled | This Boolean attribute disables the button. |
| form | formId | form attribute should be set to a string that corresponds to the id of the form element that the button is associated with. |
| formaction | URL | formaction attribute specifies a URL to target when the button is clicked, similar to the use of the action attribute on a form element. Use only for type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
formenctype attribute is set to the MIME type for how data should be transmitted to the URL specified in the action attribute. |
| formmethod | get|post | formmethod attribute specifies how form information should be transferred to the server using a particular HTTP method. |
| formnovalidate | formnovalidate | formnovalidate is a Boolean attribute is used to indicate a form should not be validated during submission. |
| formtarget | _self _blank _parant _top frameName |
formtarget attribute is set to the name of a window or frame that the button action will target the result of action. |
| name | name | name attribute is used to define a name for the button so that it can be scripted by older browsers or used to provide a name for submit buttons when a page has more than one. |
| type | button reset submit |
type attribute defines the action of the button. |
| value | text | value attribute defines the value that is sent to the server when the button is clicked. |
Global Attributes
<button> element also supports the Global Attributes in HTML.
Event Attributes
<button> element also supports the Event Attributes in HTML.
More Examples
Use CSS to style buttons
Example
<!DOCTYPE html>
<html>
<head>
<style>
button {
border: none;
color: white;
padding: 6px 16px;
border-radius: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: red;}
.button2 {background-color: green;}
</style>
</head>
<body>
<button class="button1">Red</button>
<button class="button2">Green</button>
</body>
</html>By Default CSS Value(s)
None