forms
<button>
Interactive control that triggers an action — submitting a form, opening a dialog, or running JavaScript. Use it for anything that does something; use <a href> for anything that navigates.
<button type="submit">Save</button>Common attributes
| Attribute | Purpose |
|---|---|
| type | submit (default in form) | button | reset |
| name | Submitted with the form |
| value | Value sent when this button submits |
| disabled | Blocks clicks and skips submission |
| form | id of a form this button belongs to (when outside it) |
| formaction | Overrides the form's action for this button |
| autofocus | Focus on page load |
Examples
<button type="submit">Sign up</button>Submit button inside a form
<button type="button" onclick="open()">Open menu</button>Non-submitting button that runs JS
<button type="button" disabled>Loading…</button>Temporarily disabled control
<button type="submit" formaction="/draft">Save draft</button>Overrides the form action just for this button
Gotcha
Inside a
Related tags
<form>
Container for a set of input controls that are submitted together to a server. Use it any time users need to send data — search, sign-up, checkout, comments.
<input>
The single most versatile form control — its behavior is driven by the type attribute (text, email, password, number, checkbox, radio, file, date, range, color, hidden, and more). Use it for every scalar user input; use <textarea> only for multi-line text.
<a>
The anchor element creates a hyperlink to another page, a file, an in-page anchor, an email, or a phone number. It is the fundamental building block of the web's link graph and a key SEO signal.
<label>
Associates a caption with a form control so clicking the label focuses the input and screen readers announce it. Use one for every input, select, and textarea.
<select>
Drop-down (or list-box) that lets the user pick one or more predefined options. Use it when the option set is short and known; for many options, an autocomplete input is friendlier.