Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML disabled Attribute
The disabled attribute in HTML is used to disable form elements, making them unclickable and unselectable. When applied, the element becomes inactive and cannot be interacted with by users. This attribute is commonly used with form controls like buttons, input fields, select options, and option groups.
Syntax
Following is the syntax for the disabled attribute −
<element disabled>
Or with a value −
<element disabled="disabled">
Elements Supporting Disabled Attribute
The disabled attribute can be applied to the following HTML elements −
<button>− Disables button elements<input>− Disables input fields of all types<textarea>− Disables text area elements<select>− Disables dropdown lists<option>− Disables individual options<optgroup>− Disables entire option groups<fieldset>− Disables all form controls within
Using Disabled with Input Elements
Example
Following example demonstrates the disabled attribute with various input elements −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Input Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form with Disabled Elements</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="admin" disabled>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<textarea disabled placeholder="Comments disabled..."></textarea>
<br><br>
<button type="submit">Submit</button>
<button type="reset" disabled>Reset</button>
</form>
</body>
</html>
The output shows that disabled elements appear grayed out and cannot be interacted with −
Form with Disabled Elements Username: admin (grayed out, uneditable) Password: [active input field] [Grayed out textarea with "Comments disabled..." placeholder] [Submit] [Reset - grayed out, unclickable]
Using Disabled with Option Groups
The disabled attribute on <optgroup> elements disables an entire group of options within a dropdown list.
Example
Following example shows how to disable an option group in a select dropdown −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Option Group</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<p>Select a course from the dropdown:</p>
<select style="padding: 8px; font-size: 14px;">
<optgroup label="Frontend Technologies">
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Backend Technologies" disabled>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Databases">
<option value="mysql">MySQL</option>
<option value="mongodb">MongoDB</option>
</optgroup>
</select>
</body>
</html>
In this example, the "Backend Technologies" option group is disabled, making Java, Python, and PHP options unselectable −
Course Selection Select a course from the dropdown: [Dropdown showing: Frontend Technologies HTML5 CSS3 JavaScript Backend Technologies (grayed out) Java (grayed out) Python (grayed out) PHP (grayed out) Databases MySQL MongoDB]
Using Disabled with Individual Options
Example
You can also disable individual options within a select element −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Individual Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Selection</h2>
<p>Choose a product (some items out of stock):</p>
<select style="padding: 8px; font-size: 14px;">
<option value="laptop">Laptop - $999</option>
<option value="phone" disabled>Smartphone - Out of Stock</option>
<option value="tablet">Tablet - $299</option>
<option value="watch" disabled>Smartwatch - Out of Stock</option>
<option value="headphones">Headphones - $149</option>
</select>
</body>
</html>
Disabled individual options appear grayed out and cannot be selected −
Product Selection Choose a product (some items out of stock): [Dropdown showing: Laptop - $999 Smartphone - Out of Stock (grayed out) Tablet - $299 Smartwatch - Out of Stock (grayed out) Headphones - $149]
Dynamic Enable/Disable with JavaScript
Example
Following example shows how to dynamically enable or disable elements using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Disabled Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Form Control</h2>
<label>
<input type="checkbox" id="enableSubmit" onchange="toggleSubmit()">
I agree to the terms and conditions
</label>
<br><br>
<button id="submitBtn" disabled>Submit Form</button>
<script>
function toggleSubmit() {
var checkbox = document.getElementById("enableSubmit");
var submitBtn = document.getElementById("submitBtn");
if (checkbox.checked) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
}
</script>
</body>
</html>
The submit button is initially disabled and becomes enabled only when the checkbox is checked −
Dynamic Form Control ? I agree to the terms and conditions [Submit Form - disabled, grayed out] After checking the box: ? I agree to the terms and conditions [Submit Form - enabled, clickable]
Key Points
Disabled elements appear grayed out in most browsers
Disabled form elements are not included in form submission
The disabled attribute is a boolean attribute − its presence indicates the element is disabled
JavaScript can dynamically add or remove the disabled attribute using
element.disabled = true/falseCSS can style disabled elements using the
:disabledpseudo-class
Conclusion
The disabled attribute is essential for creating interactive forms and user interfaces. It prevents user interaction with specific elements and excludes them from form submissions. Whether applied to individual form controls or entire option groups, the disabled attribute provides fine-grained control over form element accessibility and functionality.
209 Views
