HTML Reference
<button> — The Button Element
The accessible, content-rich alternative to <input type="button">. The right way to make anything clickable.
Last updated: October 2026
Definition: The <button> element creates a clickable button. Unlike <input>, it can contain HTML content — text, icons, and inline elements. Every clickable action that isn't navigation should be a button.
🎬 Live Example
Three button types — submit, reset, and button. Try them inside a form.
💡 Only "Submit" submits the form. "Reset" clears the field. "Custom" runs JavaScript without touching the form.
Basic Syntax
<button type="button">Click me</button>The default type is submit — always set type explicitly to avoid accidental form submission.
⚙️ Attributes Reference
| Attribute | Value | Purpose |
|---|---|---|
type | submit / reset / button | The button's behavior. Default is submit. |
disabled | boolean | Prevents clicks and focus. |
name | text | Sent as the key when the button submits a form. |
value | text | Sent as the value when the button submits a form. |
form | form id | Associate the button with a form elsewhere on the page. |
formaction | URL | Override the form's action for this button. |
formmethod | get / post | Override the form's method for this button. |
formenctype | encoding | Override the form's enctype for this button. |
formnovalidate | boolean | Skip validation for this button's submission. |
autofocus | boolean | Focus on page load. |
The Three Button Types
<!-- Submit: sends the form (default type) -->
<button type="submit">Save</button>
<!-- Reset: clears form fields to initial values -->
<button type="reset">Clear Form</button>
<!-- Button: does nothing without JavaScript -->
<button type="button" onclick="doSomething()">Custom Action</button>Always set type="button" for buttons that aren't meant to submit. Otherwise, clicking the button inside a form will submit it — a bug that's easy to miss.
Button with Icon and Text
Unlike <input>, buttons can contain any inline HTML.
<button type="button">
<svg width="16" height="16" viewBox="0 0 24 24">...</svg>
Download PDF
</button>
<button type="button">
<img src="/icons/trash.svg" alt="">
Delete Item
</button>
<button type="button">
⭐ Add to Favorites
</button>Use a plain emoji or SVG for the icon. Add an aria-label if the button has no visible text.
Disabled Button
<button type="submit" disabled>
Submitting...
</button>A disabled button:
- Cannot be clicked.
- Cannot receive keyboard focus.
- Is not submitted with the form.
- Is visually dimmed by default.
💡 Accessibility tip: Disabled buttons aren't focusable, so screen reader users can't find them to understand why they're disabled. Consider using aria-disabled="true" with JavaScript instead, so users can still focus and read the button.
Multiple Submit Buttons with Different Actions
Use formaction to override the form's action for one button.
<form action="/save-draft" method="POST">
<input type="text" name="title">
<textarea name="body"></textarea>
<!-- Save as draft — uses the form's action -->
<button type="submit">Save Draft</button>
<!-- Publish — overrides the action -->
<button type="submit" formaction="/publish">Publish</button>
<!-- Preview — different action, no validation -->
<button type="submit" formaction="/preview" formnovalidate>
Preview
</button>
</form>button vs a vs input type=button
| Use | When | Example |
|---|---|---|
<a> |
Navigation — going to another page | "Read more", "View profile" |
<button> |
Action — doing something on this page | "Submit", "Save", "Delete", "Open modal" |
<input type="button"> |
Legacy — avoid for new code | Older forms |
💡 Golden rule: If it changes the page, it's a link (<a>). If it does something, it's a button (<button>).
🎯 Button Type Cheatsheet
| Type | Action | Common Use |
|---|---|---|
submit | Submits the form | Login, signup, contact forms |
reset | Clears form fields | Long forms with "Clear" option |
button | No default action | Custom actions with JavaScript |
⚠️ Common Mistakes
- Forgetting
type="button". The default issubmit, so any button inside a form will submit it. Always set the type explicitly. - Using a
<div>as a button. Divs aren't focusable, aren't announced as buttons, and don't respond to keyboard Enter/Space. Use<button>. - Using a
<button>for navigation. Navigation should use<a>. Buttons are for actions, and screen readers announce them differently. - Putting a
<div>inside a<button>. Only inline content is allowed. Use<span>withdisplay: blockvia CSS if needed. - Disabling the submit button until form is valid. Disabled buttons aren't focusable. Users can't tell why. Better: keep the button enabled and show validation errors on click.
- Not setting
aria-labelon icon-only buttons. Screen readers announce empty buttons as "button" with no description. - Relying on
:hoverfor focus states. Keyboard users need:focusand:focus-visiblestyling.
♿ Accessibility Notes
- Buttons are focusable and announced as buttons by screen readers. This is why you should always use
<button>for clickable actions. - Icon-only buttons need
aria-label. Example:<button aria-label="Close menu">✕</button>. - Never remove focus outlines without a visible alternative. Use
:focus-visiblefor keyboard-only focus styles. - Use
aria-pressedfor toggle buttons. Example: a "Mute" button that can be on or off. - Use
aria-expandedfor buttons that open menus or panels. The value should be true or false. - Support the Enter and Space keys. Native
<button>handles this. Custom div-buttons don't — another reason to use<button>.
❓ Frequently Asked Questions
What is the HTML <button> tag?
The <button> element creates a clickable button. Unlike <input type=button>, it can contain HTML content — text, images, icons, and other inline elements. It is the accessible choice for any clickable action.
What is the difference between button types?
type=submit (default) submits a form. type=reset resets form fields to their initial values. type=button does nothing — used with JavaScript for custom actions.
Why does my button submit the form unexpectedly?
The default type is submit. If you add a <button> inside a form without setting type=button, it will submit the form when clicked. Always set type explicitly.
Should I use <button> or <a> for links?
Use <a> for navigation (going to another page or URL). Use <button> for actions (submit, delete, open modal, toggle). The distinction matters for accessibility, SEO, and browser behavior.
Can I put a div inside a button?
No. Buttons can only contain inline content — text, <span>, <img>, <strong>, <em>. Block elements like <div> or <p> are invalid inside a button. Use a <span> with display: block via CSS if you need block behavior.