Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
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.
Example
#
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.
More Examples
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>Attributes for <button>
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.
Submit button
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>Reset button
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>Did you know?
Which is best: button or input?
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.
Form Tags
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 |
Browser support
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 |
You may also like
Last updated on Sep 30, 2023
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
Guides
On this page
- Button tag
- Example
- More Examples
- Attributes
- Submit button
- Reset button
- Did you know
- Form tags
- Browser support
- You may also like
