The HTML disabled attribute
In short
The HTML disabled attribute disables the control so it cannot be interacted with or submitted. It is used on form controls such as <input>, <button>, <select>, <textarea>, <option>, <optgroup> and <fieldset>.
Overview
The disabled attribute disables the control so it cannot be interacted with or submitted. It applies to form controls such as <input>, <button>, <select>, <textarea>, <option>, <optgroup> and <fieldset>.
A disabled control is skipped in the tab order, not submitted, and styled grayed-out. Disabling a <fieldset> disables all controls inside it. If you need it focusable/announced, use aria-disabled instead.
Syntax
<button disabled>Unavailable</button>Values
| Value |
|---|
| A boolean attribute: present or absent. |
Example
<button disabled>Can't click</button> <input value="Locked" disabled style="padding:8px;">Best practices
- Give every control a <label> so it has an accessible name.
- Treat client-side constraints as a convenience. Always validate again on the server, since they can be bypassed.
- Choose the most specific input type so users get the right on-screen keyboard and built-in checks.
- Keep the submitted name and value meaningful for whatever processes the form.
Frequently asked questions
What does the disabled attribute do?
Disables a form control.
Are HTML form attributes enough for validation?
They give instant feedback, but client-side checks can be bypassed, so always validate on the server too.
Do form controls still need a label?
Yes. Every control needs a <label> for an accessible name, whatever attributes you set.
Which elements use the disabled attribute?
It is an element-specific attribute, used on form controls such as
<input>, <button>, <select>, <textarea>, <option>, <optgroup> and <fieldset>.
