HTML disabled Attribute

The disabled attribute on an element disables the element. This element appears grayed out and is unusable. Elements that accept this attribute include <input>, <select>, <textarea>, <button>, <option>, <optgroup>, and <fieldset>.

Example

#

A disabled attribute on an  input  element.
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.


Using disabled

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.


Syntax

<tagname disabled>
or
<tagname disabled="disabled">

Values

#

Value Description
disabled Use value 'disabled' or no value at all. Both are valid.

Elements that accept disabled

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.

<select> with disabled

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.


<textarea> with disabled

A <textarea> tag with a disabled attribute. No text can be entered.


<form action="/tutorial/action.html">
  <textarea rows="3" cols="55" disabled>
    This is a message. 
  </textarea><br />

  <button type="submit">Submit</button>
</form>



For additional details see our HTML textarea disabled Reference.


<button> with disabled

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.


<option> with disabled

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.


<optgroup> with disabled

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.


<fieldset> with disabled

A <fieldset> tag with a disabled attribute.
All controls inside the fieldset are disabled and cannot be selected.

Customer Information


<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.


Browser support

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

You may also like



Guides