The HTML <button> type attribute
The HTML type attribute sets a button's behavior. Use type="submit" to send a form, type="reset" to restore its fields or type="button" for a button that only runs JavaScript. Without a type, a button inside a form submits the form.
Overview
The HTML type attribute on a <button> sets what the button does when it is activated. It takes three values, submit to send the form, reset to restore the form's fields and button to do nothing by default.
When the attribute is missing or invalid, a button inside a form behaves as a submit button. That default explains the familiar bug where clicking a button that opens a menu or recalculates a total suddenly submits the form and reloads the page. Values like link, cancel or file don't exist and are treated as missing.
A type="button" element never submits, so clicking it never triggers form validation either. That makes it the right choice for any control that only runs JavaScript. Commands are an exception to the submit default. A typeless button with a command or commandfor attribute is not a submit button, and inside a form it does nothing at all.
Only submit buttons honor formaction, formmethod, formenctype, formtarget and formnovalidate. The reset type is rarely a good idea, because one click puts every field back to its initial value and throws away what the user typed.
Syntax
<button type="button">Show details</button>Values
| Value |
|---|
| submit (default in a form) | reset | button |
Example
<form id="order">
<label for="qty">Quantity</label>
<input type="text" id="qty" name="qty" value="1">
<button type="button" id="calc">Recalculate</button>
<button type="reset">Reset</button>
<button type="submit">Order</button>
</form>
<p id="log">Change the quantity, then try each button.</p>
<script>
function log(msg) {
document.getElementById('log').textContent = msg;
}
document.getElementById('calc').addEventListener('click', function () {
log('type="button" ran JavaScript and did not submit.');
});
document.getElementById('order').addEventListener('submit', function (e) {
e.preventDefault();
log('type="submit" submitted the form.');
});
document.getElementById('order').addEventListener('reset', function () {
log('type="reset" restored the initial value.');
});
</script>Best practices
- Write the
typeon every button, including submit buttons, so the intent is clear from the markup. - Use
type="button"for toggles, menus, tabs and other controls that only run JavaScript. - Give buttons with
commandorcommandforatype="button"when they sit inside a form. - Use an
<a>element for navigation instead of a button whose click handler changes the page location. - Leave out reset buttons unless users truly need them, and never place one where it can be hit instead of Submit.
Accessibility
The type attribute changes behavior, not the role. ARIA in HTML gives every <button> the implicit role button, whatever its type. Make the visible label say what will happen, such as Place order rather than Submit.
Frequently asked questions
What is the default type of an HTML button?
type=link is treated the same way.Why does my button submit the form when I click it?
type=button to buttons that should only run JavaScript.What is the difference between type=button and type=submit?
Is there a type=link or type=cancel for buttons?
command=close or formmethod=dialog to close a dialog.
