HTML disabled Attribute

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. Then, it is possible to make the element usable again, removing the disabled value by 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

<tag disabled></tag>

Example of the HTML "disabled" 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>

Example of the HTML "disabled" 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>
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>

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

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

Example of the HTML "disabled" 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>

Example of the HTML "disabled" 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>

Example of the HTML "disabled" 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>



Do you find this helpful?

Related articles