Buttons
Buttons trigger actions: submitting a form, opening a menu, adding to a cart, playing a video. The <button> element comes with keyboard support, focus handling and accessibility built in — which is why you should always use it instead of making clickable divs.
Three button types
| type | Does |
|---|---|
submit | Submits the form it belongs to. This is the default for buttons inside a form. |
reset | Restores every field to its initial value. Rarely helpful — users click it by accident and lose their work. |
button | Nothing by itself; JavaScript decides what it does |
type is a submit button. A "Show password" or "Add another item" button will unexpectedly submit the form. Always write type="button" for buttons that don't submit.Buttons can contain HTML
Unlike <input type="submit">, a <button> can contain icons, images and formatted text. An icon-only button needs an accessible name — aria-label here — because "✕" read aloud as "multiplication sign" helps nobody.
Disabled buttons
disabled removes a button from the tab order and ignores clicks, but users get no explanation of why. For things like "Submit" before a form is complete, it's often better to keep the button active and show a helpful message on click, or use aria-disabled="true" with a script that explains what's missing.
Overriding form behaviour per button
formaction, formmethod, formtarget and formnovalidate let one form have different submit buttons that send data to different places. A button's name and value are also submitted, so the server can tell which button was pressed.
Buttons that control other elements
Newer HTML attributes let buttons open dialogs and popovers without any JavaScript (lesson 38):
Button or link?
| Does it… | Use |
|---|---|
| Go to another page or URL? | <a href>, even if it's styled to look like a button |
| Perform an action on this page? | <button> |
| Submit a form? | <button type="submit"> |
The difference matters: links respond to Enter and can be opened in new tabs; buttons respond to Enter and Space and are announced as buttons.
Why not a clickable div?
<!-- ✗ Not focusable, no keyboard support, not announced as a button --> <div class="btn" onclick="save()">Save</div> <!-- ✓ Focusable, works with Enter and Space, announced correctly --> <button type="button" class="btn" onclick="save()">Save</button>
The real button needs no extra code to be accessible. CSS can make it look like anything.