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: <button>, <input>, <option>, <select>, <textarea>, <fieldset>, <outgroup>, and <keygen>.
Syntax
<tag disabled></tag>Example: In this example we demonstrate the use of the disabled attribute in a <button> tag, rendering the "Click Me!" button unclickable and visually indicating it is disabled.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<!--Driver Code Ends-->
<h2>HTML disabled Attribute</h2>
<!--A disabled button-->
<button type="button" disabled>Click Me!</button>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<input>: 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 <input> field, making it uneditable. The input field displays "This input field is disabled" as a placeholder.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<!--Driver Code Ends-->
<h2>HTML disabled Attribute</h2>
<!--A disabled input-->
<label>Input:
<input type="text"
name="value"
value="This input field is disabled" disabled>
</label>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<option>: When the disabled attribute is present, it specifies that the option field is disabled. A disabled option is unusable and un-clickable.
Example: In this example we demonstrates the disabled attribute in a <select> dropdown, where the "Volvo" option is disabled, making it unselectable, while other car brands remain selectable.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML disabled Attribute</h2>
<!--A disabled input-->
<p>Volvo is disabled.</p>
<!--Driver Code Ends-->
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select><br>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<select>: 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 <select> element where the entire dropdown menu is disabled, preventing the user from selecting any of the search algorithm options listed.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML disabled Attribute</h2>
<!--A disabled input-->
<p>This select field is disabled.</p>
<!--Driver Code Ends-->
<select disabled>
<option value="binary">Binary Search</option>
<option value="linear">Linear Search</option>
<option value="interpolation">
Interpolation Search
</option>
</select>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<textarea>: When the disabled attribute is present, it specifies that the textarea field is disabled. A disabled textarea is unusable and un-clickable.
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<!--Driver Code Ends-->
<h2>HTML disabled Attribute</h2>
<!--A disabled textarea-->
<textarea disabled>
This textarea field is disabled.
</textarea>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<fieldset>: When the disabled attribute is present, it specifies that the fieldset is disabled. A disabled fieldset is unusable and un-clickable.
Example: In this example showcases a disabled <fieldset> containing a text input. The disabled attribute prevents interaction with all elements inside the fieldset, making them uneditable.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<!--Driver Code Ends-->
<h2>HTML disabled Attribute</h2>
<!--A disabled fieldset-->
<p>This field set is disabled.</p>
<fieldset disabled>
Name: <input type="text"><br>
</fieldset>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
<optgroup>: 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 <optgroup> within a <select> dropdown. The disabled attribute renders all options under "German Cars" unselectable, preventing user interaction with those options.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML disabled Attribute</h2>
<!--A disabled optgroup-->
<!--Driver Code Ends-->
<select>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->