<button> Button
A button that submits a form, resets it or runs some command.
<button> creates a button. Inside a form its default type is submit, so buttons that should not submit need type="button". Forgetting that causes a lot of bugs.
A button can be focused and responds to Enter and Space out of the box, which a clickable div does not. Buttons are for actions and links are for navigation. Buttons can also open popovers and dialogs through popovertarget, or through commandfor with command.
The submit, reset and button types are covered in the button element definition (opens in a new tab). Practise in the Buttons and Fieldsets lesson.
Syntax
<button type="button">Label</button>When to use it
Save, Add to cart, Open menu, Play: actions that happen on the current page or submit a form are <button> elements. When a click takes the user to a different URL, that is navigation. Use an a element there, even if the design makes it look like a button. People can open a link in a new tab or bookmark it. A button allows neither.
<input type="submit"> does the same job, but it can only show its value as plain text. A button can hold an icon, an image or emphasis. Both are valid. Using button everywhere keeps your forms consistent.
Plenty of developers never notice that one form can have several submit buttons that behave differently. formaction sends the data to another URL. formmethod switches the method, and formnovalidate skips validation, which is what a Save draft button next to Publish needs. The pressed button also sends its own name and value, so the server can tell which one was clicked.
Attributes
| Attribute | What it does |
|---|---|
type | submit (default in forms), reset or button. |
name | Name sent with the value when this button submits the form. |
value | Value sent with the name. |
disabled | Disables the button. |
form | Id of the form it belongs to, if outside it. |
popovertarget | Id of a popover element to toggle. |
commandfor | Id of the element to control, such as a dialog. |
command | Action to run, such as show-modal, close or toggle-popover. |
Live example
Edit the code and watch the preview.
<form>
<label for="q">Search</label>
<input id="q" name="q">
<button type="submit">Search</button>
<button type="reset">Clear</button>
</form>
<button type="button" popovertarget="info">Show info</button>
<div id="info" popover>Popovers can open without JavaScript.</div>More examples
Save draft and Publish
One form, two submit buttons. Publish insists on a title. Save draft carries formnovalidate and goes through with the title empty. Each button sends its own value under name="action", as you can see by trying both in the preview.
<form action="/posts" method="post">
<label for="t">Title</label>
<input id="t" name="title" required>
<label for="b">Text</label>
<textarea id="b" name="body" rows="3"></textarea>
<button name="action" value="draft" formnovalidate>Save draft</button>
<button name="action" value="publish">Publish</button>
</form>Rich content inside a button
Buttons can contain other elements; inputs cannot. The first button puts an image beside its text. Its alt is empty, since the text already names the action. The second has two lines of text with different weight.
<button type="button">
<img src="cat.svg" alt="" width="32" height="24">
Adopt a cat
</button>
<button type="button">
<strong>Order now</strong><br>
<small>Free delivery</small>
</button>Tip: Any button that should not submit needs type="button".
Browser support
Every browser supports button, and it is in the HTML Living Standard. popovertarget works in all current major browsers. The commandfor and command attributes, which open dialogs and popovers with no script, arrived more recently. Look at command attribute support (opens in a new tab) and keep a fallback where you need one.
Accessibility
A button needs an accessible name, which can come from its text, aria-label or an image's alt. It also needs a visible focus style (WCAG 2.4.7, 4.1.2). The expected keyboard behaviour is described in the W3C button pattern (opens in a new tab).
Common mistakes
Wrong
<div class="btn" onclick="buy()">Buy</div>Right
<button type="button" class="btn" onclick="buy()">Buy</button>A button gets focus and works with Enter and Space for free. A div gets neither.
Wrong
<button><img src="x.svg"></button>Right
<button type="button" aria-label="Close"><img src="x.svg" alt=""></button>Icon-only buttons still need an accessible name.
Frequently asked questions
Why does my button submit the form?
Because a <button> in a form defaults to type="submit". Clicking it submits the form and reloads the page. Buttons that run JavaScript, like one that opens a menu or a dialog, need an explicit type="button". Be sparing with type="reset", which wipes out everything the user typed.
What is the difference between button and input type=submit?
Both submit a form. <input type="submit" value="Send"> shows plain text from its value attribute and nothing more. A <button> can hold HTML, such as icons, images and formatted text, and is easier to style. These days button is the usual pick.
Practise it
- Forms and Inputs (Module 6: Forms)
- Labels (Module 6: Forms)
- Input Types (Module 6: Forms)
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Buttons and Fieldsets (Module 6: Forms)
- Built-in Validation (Module 6: Forms)