The <button> element creates a clickable control that performs an action — and inside a form, its type attribute quietly determines whether clicking it submits the form or not.
Syntax
<button type="submit">Submit</button>
<button type="button">Do Something Else</button>
<button type="reset">Clear Form</button>Basic Example
<form action="/enroll" method="post">
...fields...
<button type="submit">Enroll Now</button>
</form>Browser output: a styled, clickable button; clicking it (with type="submit") collects the form's data and submits it.
How It Works
| Type | Behavior |
|---|---|
submit | Submits the parent form — this is the default if type is omitted entirely |
button | Does nothing on its own — used purely to trigger custom JavaScript behavior |
reset | Clears every field in the form back to its default values |
Important Attributes
| Attribute | Purpose |
|---|---|
type | Controls submit/button/reset behavior — see table above |
disabled | Makes the button unclickable and visually greyed out |
Real-World Example
<button type="button" onclick="togglePasswordVisibility()">Show Password</button>A genuinely non-submitting button — type="button" is required here, because without it, this button would default to submit and unexpectedly send the form the moment it's clicked.
The Critical Default-Type Gotcha
Inside a <form>, any <button> with no explicit type defaults to submit — a very common source of bugs when a developer adds a button purely for a JavaScript action (like "Show Password" or "Add Another Field") and it unexpectedly submits the whole form instead.
Common Mistakes
- Forgetting
type="button"on a JavaScript-only button inside a form, causing an accidental, unwanted form submission on click - Using
<a href="#">styled to look like a button for an action, instead of a real<button>— see the a vs button comparison in Links
Best Practices
- Always write
typeexplicitly on every button inside a form — never rely on the implicit default - Use
<button>(not a styled link or div) for any control that performs an action rather than navigating
Accessibility Considerations
A real <button> is automatically keyboard-focusable and activatable with both Enter and Space — a genuine, built-in benefit lost the moment it's replaced with a styled non-button element.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
<button> (unlike the older <input type="submit">) can contain rich content — an icon plus text, for example — making it the generally preferred modern choice for form buttons.
Mini Practice
- Build a form with a real
type="submit"button and a separatetype="button"for a non-submitting JavaScript action. - Explain, in your own words, what happens if
typeis left off a button inside a form.
