A button element can contain text and other phrasing content; an input type=button gets its label from value. Neither label alone gives a control a useful action.
Make this comfortable
HTML button versus input type=button: content and default action
Choose by content and ownership
A receipt review control needs a short icon and visible text. button can contain both. Inside a form, declare type=button for a local interface action; the default missing type can submit the form. For actual submission, use type=submit and let the server handle the request.
<form action="/receipts/review" method="post">
<button type="button" aria-label="Show receipt help">?</button>
<input type="button" value="Preview receipt">
<button type="submit">Save review</button>
</form>Behavior boundary
The two non-submit controls need application behavior before they do anything useful. The submit button invokes the form endpoint. The question-mark button needs a tested accessible name and a working help panel; do not publish a dead control just because its markup looks right.
Cost and limits
Both elements are native keyboard controls. An input button is compact for a text-only label, while button handles richer phrasing. Avoid nesting another interactive control inside button.
Common Mistakes
- Omitting type inside a form can submit unexpectedly.
- An icon-only button needs an accessible name.
- type=button does not create behavior by itself.
Read next
html