HTML disabled Attribute
Definition and Usage
The
disabled attribute is a boolean attribute.
When present, it specifies that the element should be disabled.
A disabled element is unusable.
The
disabled attribute can be set to keep a user from using the element
until some other condition has been met (like selecting a checkbox, etc.). Then,
a JavaScript could remove the disabled value, and make the element usable again.
Applies to
The
disabled attribute can be used on the following elements:
| Elements | Attribute |
|---|---|
| <button> | disabled |
| <fieldset> | disabled |
| <input> | disabled |
| <optgroup> | disabled |
| <option> | disabled |
| <select> | disabled |
| <textarea> | disabled |
Examples
Button Example
A disabled button:
<button type="button" disabled>Click Me!</button>
Try it Yourself »
Fieldset Example
Disable a group of related form elements:
<fieldset disabled>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
Try it Yourself »
Input Example
An HTML form with a disabled input field:
<form
action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"
disabled><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Optgroup Example
A disabled option-group:
<select>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Try it Yourself »
Option Example
A drop-down list with one disabled option:
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Select Example
A disabled drop-down list:
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Textarea Example
A disabled text area:
<textarea disabled>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
Try it Yourself »
Browser Support
The disabled attribute has the following browser support for each element:
| Element | |||||
|---|---|---|---|---|---|
| button | Yes | Yes | Yes | Yes | Yes |
| fieldset | Yes | Not supported | Yes | 7.0 | Yes |
| input | 1.0 | 6.0 | 1.0 | 1.0 | 1.0 |
| optgroup | 1.0 | 8.0 | Yes | Yes | Yes |
| option | 1.0 | 8.0 | 1.0 | Yes | Yes |
| select | Yes | Yes | Yes | Yes | Yes |
| textarea | Yes | Yes | Yes | Yes | Yes |
