W3docs
en
Log in

HTML disabled Attribute

The disabled attribute is a boolean attribute specifying that the element must be disabled. Read about this attribute and see on what elements it can be used.

The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled.

This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Additionally, disabled form controls are not submitted with the form. It is possible to make the element usable again by removing the disabled attribute with JavaScript. The disabled attribute is commonly grayed out.

You can use the disabled attribute on the following elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, and <textarea>.

When the disabled attribute is applied to an element, the :disabled pseudo-class also applies to it. The elements supporting the disabled attribute but not having the attribute set match the :enabled pseudo-class.

Syntax

Syntax of HTML disabled Attribute

<tag disabled></tag>

Example of the HTML disabled attribute used on the <button> element:

Example of the HTML <span class="attribute">"disabled"</span> attribute used on the <button> element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <button type="button">Button</button> <br /><br />
    <button type="button" disabled>Disabled button</button>
  </body>
</html>
Try it Yourself »

Example of the HTML disabled attribute used on the <fieldset> element:

Example of the HTML <span class="attribute">"disabled"</span> attribute used on the <fieldset> element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 120px;
      }
      fieldset {
        background: #e1eff2;
      }
      legend {
        padding: 20px 0;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset disabled>
        <legend>Personal Information:</legend>
        <div>
          <label>First Name:</label>
          <input type="text" />
        </div>
        <div>
          <label>Last Name:</label>
          <input type="text" />
        </div>
        <div>
          <label>Date of birth:</label>
          <input type="text" />
        </div>
      </fieldset>
    </form>
  </body>
</html>
Try it Yourself »
Danger

When a <fieldset> is disabled, all descendant form controls are also disabled except for the form controls within the <legend> element.

Example of the HTML disabled attribute used on the <input> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="#" method="get">
      <input type="text" name="name" placeholder="Enter your name" />
      <input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
Try it Yourself »

Example of the HTML disabled attribute used on the <optgroup> element:

HTML disabled Attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <select>
      <optgroup label="Books" disabled>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="java">Java</option>
        <option value="linux">Linux</option>
        <option value="git">Git</option>
      </optgroup>
    </select>
  </body>
</html>
Try it Yourself »

Example of the HTML disabled attribute used on the <option> element:

Example of the HTML <span class="attribute">"disabled"</span> attribute used on the <option> element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="computers">Computer</option>
        <option value="notebook">Notebook</option>
        <option value="tablet" disabled>Tablet</option>
      </select>
    </form>
  </body>
</html>
Try it Yourself »

Example of the HTML disabled attribute used on the <select> element:

Example of the HTML <span class="attribute">"disabled"</span> attribute used on the <select> element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select disabled>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>
Try it Yourself »

Example of the HTML disabled attribute used on the <textarea> element:

Example of the HTML <span class="attribute">"disabled"</span> attribute used on the <textarea> element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form> 
      <textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
    </form>
  </body>
</html>
Try it Yourself »

Practice

Practice

What can you say about the HTML 'disabled' attribute based on the page content?