The <button> tag creates a clickable button.
Buttons can contain content, such as text, icons, images, etc.
Three button types are available: button, submit, and reset.
Clicking this <button> opens an alert box.
<button type="button"
onclick="alert('Like has been saved!');">
Like post <img src="/img/html/heart.png" />
</button>
Tip: A <button> is more flexible
than an <input> element because it
can contain any type of content, such as text, icons, and images.
A <button> of type button which, when clicked, starts a JavaScript process.
Note: Once started, the button is disabled to prevent running multiple processes at the same time.
<button id="starter" type="button" onclick="start()">Start process</button>
<br /><br />
<progress id="progress-bar" value="0" max="100"></progress>
<script>
let start = () => {
setInterval( () => {
let value = document.getElementById("progress-bar").value;
value = Math.min(value + .1, 100) % 100;
document.getElementById("progress-bar").value = value;
}, 10 );
let button = document.getElementById("starter");
button.setAttribute("disabled", "disabled");
}
</script>
A complete list of <button> attributes.
| Attribute | Value | Description |
|---|---|---|
| type |
button submit reset |
Button's type |
| name | name | Defines a name for the button. |
| value | text | Initial value for the button |
| id | identifier | Defines a unique identifier for the button. |
| class | classnames | Sets one or more CSS classes to be applied to the button. |
| style | CSS-styles | Sets the style for the button. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the button is hidden. |
| title | text | Sets a title that displays as a tooltip. |
| tabindex | index | Sets a tab sequence relative to the other elements. |
| disabled | disabled | Specifies whether the button is disabled |
| form | form-id | Tells the browser which forms the button belongs to. |
| formaction | URL | Only for type="submit", indicates where the submitted form data shall be sent. |
| formenctype |
application/x-www-form-urlencoded, multipart/form-data, text/plain |
Only for type="submit", indicates how the submitted form data should be encoded. |
| formmethod |
get post |
Only for type="submit", indicates how the submitted form data will be sent. |
| formnovalidate | Only for type="submit", indicates that form data should not be validated on submit. | |
| formtarget |
_blank _self _parent _top framename |
Only for type="submit", indicates where the response should be displayed after form submission. |
| autofocus | no value | Button gets focused after page load |
For additional global attributes see our global attributes list.
A <button> of type submit. It will submit the form when clicked.
<form action="/tutorial/action.html">
<input type="text" name="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
A <button> of type reset clears input controls to their original values.
Enter your email and then click reset.
<form>
<input type="text" name="email" placeholder="Enter your email">
<button type="reset">Reset</button>
</form>
The <button> element offers the same functionality
as <input> -- specifically
button,
submit, and
reset types.
So which one is better?
The difference is that <input> is an empty element without content.
The text on an <input> button is set with the value attribute and that is
all you can do.
On the other hand, a <button> accepts other elements such as text, icons, and images.
So, with <button> you have more options to custom design the control.
The <button> tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
| Element | Description |
|---|---|
| <form> | Defines a data entry area that contains input elements |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <textarea> | Creates a multi-line text input control |
| <select> | Creates a dropdown control |
| <button> | Creates a clickable button that can contain text or an image |
| <datalist> | Specifies a list of options for a textfield (<input>) element |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <legend> | Defines a caption for a fieldset |
Here is when <button> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
