HTML disabled Attribute

Description

The HTML disabled attribute is a Boolean attribute used to indicate that an element is not available for interaction. When applied, it prevents the user from interacting with the element, including not being able to click on it, focus on it, or modify its value. This attribute can be used on various form elements such as <input>, <button>, <select>, <textarea>, and <optgroup>.

Elements with the disabled attribute set are typically rendered in a way that visually indicates they are not interactive. For example, a button or input field may appear dimmed or grayed out. Although these elements are visible on the page, users cannot interact with them to enter information or trigger actions.

Furthermore, when form elements are disabled, their values are not submitted with the form. This is an important consideration for developers to ensure that essential data is not excluded from submissions due to the use of the disabled attribute. To visually disable an element but still include its value in form submissions, alternatives such as the readonly attribute for input fields can be used.

In HTML, the disabled attribute is used without a value or with an empty string value (disabled or disabled="") and is considered true if present on the element, regardless of its value. The absence of the disabled attribute means the element is fully interactive.

Syntax

<tag disabled></tag>

Values

The disabled attribute is a boolean attribute, therefore no values are associated with this attribute.

Applies To

The disabled attribute can be used on the following html elements.

Example

HTML

<p>Buttons</p>

<button type="button">Button</button> <br><br>

<button type="button" disabled>Disabled button</button><br><br>

<p>Select Options</p>

<select>

  <option value="css">CSS</option>

  <option value="html">HTML</option>

  <option value="javascript" disabled>Javascript</option>

</select><br><br>

<p>Checkboxes</p>

    <label>

      <input type="checkbox" name="chbox" value="regular" /> Regular

    </label>

    <label>

      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled

    </label>