The disabled attribute on an element disables the element.
A disabled element appears grayed out and is unusable.
Elements that accept disabled include <input>, <select>, <textarea>, <button>, <option>, <optgroup>, and <fieldset>.
An <input> element with a disabled attribute.
The input field is unusable and is not included in form submission.
<form action="/tutorial/action.html">
<label for="subject">Title</label>
<input type="text" id="title" name="title" disabled><br /><br />
<input type="submit">
</form>
For additional details see our HTML input disabled Reference.
The disabled attribute specifies that the element is disabled.
The element appears grayed out and no user interaction is possible.
Disabled elements are excluded from form submission.
<tagname disabled>
<tagname disabled="disabled">
| Value | Description |
|---|---|
| disabled | Use value 'disabled' or no value at all. Both are valid. |
The following elements accept the disabled attribute.
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input field -- see example above | |
| <select> | Specifies a dropdown field. | |
| <textarea> | Specifies a multi-line text field. | |
| <button> | Creates a clickable button. | |
| <option> | Adds an option to a dropdown list. | |
| <optgroup> | Groups one or more dropdown options. | |
| <fieldset> | Creates a container that groups related input fields. |
A <select> tag with a disabled attribute. The dropdown will not appear.
<form action="/tutorial/action.html">
<select name="size" disabled>
<option value="">-- Select a Size --</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select><br />
<button type="submit">Submit</button>
</form>
For additional details see our HTML select disabled Reference.
A <textarea> tag with a disabled attribute. No text can be entered.
<form action="/tutorial/action.html">
<textarea rows="3" cols="45" disabled>
This is a message.
</textarea><br />
<button type="submit">Submit</button>
</form>
For additional details see our HTML textarea disabled Reference.
A <button> tag with a disabled attribute.
The button is not clickable.
<button disabled type="button"
onclick="alert('Button was clicked!');">Click Me</button>
For additional details see our HTML button disabled Reference.
An <option> tag with a disabled attribute.
The last two options, Chicago and Houston, are disabled and cannot be selected.
<select>
<option value="">-- Select City --</option>
<option value="newyork">New York</option>
<option value="losangeles">Los Angeles</option>
<option value="chicago" disabled>Chicago</option>
<option value="houston" disabled>Houston</option>
</select>
For additional details see our HTML option disabled Reference.
This is an <optgroup> tag with a disabled attribute.
All options in the Europe group are disabled and cannot be selected.
<select>
<option value="">-- Select City --</option>
<optgroup label="Europe" disabled>
<option value="stockholm">Stockholm</option>
<option value="barcelona">Barcelona</option>
<option value="athens">Athens</option>
</optgroup>
<optgroup label="Asia">
<option value="bangkok">Bangkok</option>
<option value="manila">Manila</option>
<option value="jakarta">Jakarta</option>
</optgroup>
</select>
For additional details see our HTML optgroup disabled Reference.
A <fieldset> tag with a disabled attribute.
All controls inside the fieldset are disabled and cannot be selected.
<form action="/tutorial/action.html">
<fieldset disabled>
<legend>Customer Information</legend>
<label>Name</label>
<input type="text" name="name"><br />
<label>Age</label>
<input type="text" name="age"><br />
<label>Email</label>
<input type="text" name="email"><br />
<button type="submit">Submit</button>
</fieldset>
</form>
For additional details see our HTML fieldset disabled Reference.
Here is when disabled support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
