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
How to set that the specified element/group of elements should be disabled in HTML?
The disabled attribute in HTML is used to make form elements non-interactive and prevent user input or interaction. When an element is disabled, it appears grayed out, cannot receive focus, and its value is not submitted with the form data.
Syntax
Following is the syntax for the disabled attribute −
<element disabled>
Or with a value −
<element disabled="disabled">
The disabled attribute is a boolean attribute, meaning its presence alone indicates the element is disabled, regardless of its value.
Supported Elements
The disabled attribute can be applied to the following HTML elements −
-
<button>− Disables button clicks -
<input>− Disables all input types (text, checkbox, radio, submit, etc.) -
<select>− Disables dropdown selection -
<textarea>− Disables text area input -
<option>− Disables individual options within a select -
<optgroup>− Disables entire option groups -
<fieldset>− Disables all form elements within the fieldset
Example − Disabled Form Elements
Following example demonstrates the disabled attribute on various form elements −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sports Survey</h2>
<p>Which sports do you like?</p>
<form action="" method="get">
<input type="checkbox" name="sport" value="football" checked> Football<br>
<input type="checkbox" name="sport" value="cricket" checked> Cricket<br>
<input type="checkbox" name="sport" value="hockey" disabled> Hockey (unavailable)<br>
<br>
<input type="text" placeholder="Your name" disabled><br><br>
<input type="submit" value="Submit" disabled>
</form>
</body>
</html>
The output shows grayed-out disabled elements that cannot be interacted with −
Sports Survey Which sports do you like? ? Football ? Cricket ? Hockey (unavailable) [grayed out] [Your name text box - grayed out] [Submit button - grayed out]
Example − Disabled Select and Options
Following example shows how to disable select dropdowns and individual options −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Select Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<label for="course1">Available Courses:</label>
<select name="course1" id="course1">
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="js" disabled>JavaScript (Full)</option>
<option value="react">React</option>
</select>
<br><br>
<label for="course2">Unavailable Courses:</label>
<select name="course2" id="course2" disabled>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
</body>
</html>
The first dropdown works normally except for the disabled "JavaScript (Full)" option, while the second dropdown is completely disabled −
Course Selection Available Courses: [HTML5 ?] (JavaScript option appears grayed out when opened) Unavailable Courses: [Python ?] (entire dropdown grayed out, non-clickable)
Example − Disabled Fieldset
Following example demonstrates using disabled on a fieldset to disable all contained form elements −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Fieldset Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset>
<legend>Personal Information (Active)</legend>
<input type="text" placeholder="First Name"><br><br>
<input type="text" placeholder="Last Name"><br><br>
<input type="email" placeholder="Email">
</fieldset>
<br>
<fieldset disabled>
<legend>Payment Information (Disabled)</legend>
<input type="text" placeholder="Card Number"><br><br>
<input type="text" placeholder="CVV"><br><br>
<button type="button">Process Payment</button>
</fieldset>
</form>
</body>
</html>
All elements within the disabled fieldset are automatically disabled and appear grayed out −
Personal Information (Active) [First Name] [Last Name] [Email] Payment Information (Disabled) [entire section grayed out] [Card Number - disabled] [CVV - disabled] [Process Payment - disabled button]
Enabling/Disabling with JavaScript
Following example shows how to dynamically enable or disable form elements using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Enable/Disable</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<input type="checkbox" id="agree" onchange="toggleSubmit()">
<label for="agree">I agree to the terms and conditions</label><br><br>
<input type="text" id="username" placeholder="Username"><br><br>
<input type="email" id="email" placeholder="Email"><br><br>
<button type="submit" id="submitBtn" disabled>Register</button>
<button type="button" onclick="toggleForm()">Toggle Form</button>
</form>
<script>
function toggleSubmit() {
var checkbox = document.getElementById("agree");
var submitBtn = document.getElementById("submitBtn");
submitBtn.disabled = !checkbox.checked;
}
function toggleForm() {
var username = document.getElementById("username");
var email = document.getElementById("email");
username.disabled = !username.disabled;
email.disabled = !email.disabled;
}
</script>
</body>
</html>
The submit button becomes enabled only when the checkbox is checked, and the "Toggle Form" button enables/disables the input fields.
Key Points
Here are the important characteristics of the disabled attribute −
- Visual appearance − Disabled elements appear grayed out or faded
- User interaction − Cannot be clicked, focused, or receive keyboard input
- Form submission − Disabled form elements are not included in form data when submitted
- Boolean attribute − Presence of the attribute disables the element, regardless of its value
- Inheritance − When a fieldset is disabled, all form elements within it are automatically disabled
-
JavaScript control − Can be dynamically enabled/disabled using the
disabledproperty
Conclusion
The disabled attribute is essential for creating user-friendly forms by preventing interaction with unavailable or conditional elements. It provides both visual feedback and functional restrictions, ensuring disabled elements cannot be activated or submit data. Use it to create better user experiences in forms and interactive web applications.
157 Views
