disabled
Disables a form control: it cannot be used, and its value is not submitted.
Syntax
<button disabled>…</button>Examples
A disabled button and field, a read-only field:
<p><button disabled>Pay</button></p>
<p><input value="Disabled" disabled></p>
<p><input value="Read-only (still sent)" readonly></p>Enable the button after agreeing:
<label><input type="checkbox" onchange="pay.disabled = !this.checked"> I agree</label>
<button id="pay" disabled>Continue</button>Notes
A disabled control cannot be focused and is not submitted. If a value must be shown and sent but not edited, use readonly. Disabled buttons without explanation frustrate users: tell them what to do to enable the button.
See also
- <button> — A button: submits a form or triggers an action.
- <fieldset>, <legend> — A group of related form fields with a `<legend>` title.
- <input> — An input field; its kind is set by the `type` attribute.
- inert — Makes part of the page inactive: it cannot be clicked, reached with Tab or selected.
Related recipes
In the tutorial
- Buttons — The button tag and its submit, reset and button types, a button with an icon, a disabled button and the difference between a button and a link.