HTML disabled Attribute (original) (raw)

Last Updated : 11 Jul, 2025

The disabled attribute in HTML indicates whether the element is disabled or not. If this attribute is set, the element is disabled. The disabled attribute is usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused. It is a boolean attribute.

**Usage: It can be used on the following elements: , , ,

**Syntax:

**Example: In this example we demonstrate the use of the disabled attribute in a tag, rendering the "Click Me!" button unclickable and visually indicating it is disabled.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled button-->
<button type="button" disabled>Click Me!</button>

`

**Output:

****:** When the disabled attribute is present, it specifies that the input is disabled. A disabled input is unusable and un-clickable.

**Example: In this example shows the disabled attribute in an field, making it uneditable. The input field displays "This input field is disabled" as a placeholder.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled input-->
<label>Input:
    <input type="text" 
           name="value" 
           value="This input field is disabled" disabled>
</label>

`

**Output:

****

**Example: In this example we demonstrates the disabled attribute in a dropdown, where the "Volvo" option is disabled, making it unselectable, while other car brands remain selectable.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled input-->

Volvo is disabled.

<select>
    <option value="volvo" disabled>Volvo</option>
    <option value="saab">Saab</option>
    <option value="vw">VW</option>
    <option value="audi">Audi</option>
</select><br>

`

**Output:

****:** When the disabled attribute is present, it specifies that the select field is disabled. A disabled select is unusable and un-clickable.

**Example: In this example shows a disabled element where the entire dropdown menu is disabled, preventing the user from selecting any of the search algorithm options listed.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled input-->

<p>This select field is disabled.</p>

<select disabled>
    <option value="binary">Binary Search</option>
    <option value="linear">Linear Search</option>
    <option value="interpolation">
        Interpolation Search
    </option>
</select>

`

**Output:

****

**Example: In this example we demonstrates a disabled <textarea> element, which prevents user interaction. The disabled attribute makes the textarea field uneditable, displaying the given content as read-only.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled textarea-->
<textarea disabled>
    This textarea field is disabled. 
</textarea>

`

**Output:

****

**Example: In this example showcases a disabled

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled fieldset-->

<p>This field set is disabled.</p>

<fieldset disabled>
    Name: <input type="text"><br>
</fieldset>

`

**Output:

****:** When the disabled attribute is present, it specifies that the optgroup is disabled. A disabled optgroup is unusable and un-clickable.

**Example: In this example we demonstrates a disabled within a dropdown. The disabled attribute renders all options under "German Cars" unselectable, preventing user interaction with those options.

HTML `

GeeksforGeeks

HTML disabled Attribute

<!--A disabled optgroup-->
<select>
    <optgroup label="German Cars" disabled>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

`

**Output:

**Supported Browsers: The browser supported by _disabled attribute are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari