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>, <optgroup> and <keygen>.
Syntax:
<tag disabled></tag>
Example:
HTML
<!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>
<button type="button" disabled>Click Me!</button>
</body>
</html>
|
Output:
<input>: When the disabled attribute is present, it specifies that the input is disabled. A disabled input is unusable and un-clickable.
Example:
HTML
<!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>
<label>Input:
<input type="text" name="value"
value="This input field is disabled" disabled>
</label>
</body>
</html>
|
Output:
<option>: When the disabled attribute is present, it specifies that the option field is disabled. A disabled option is unusable and un-clickable.
Example:
HTML
<!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>
<p>Volvo is disabled.</p>
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select><br>
</body>
</html>
|
Output:
<select>: When the disabled attribute is present, it specifies that the select field is disabled. A disabled select is unusable and un-clickable.
Example:
HTML
<!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>
<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>
</body>
</html>
|
Output:
<textarea>: When the disabled attribute is present, it specifies that the textarea field is disabled. A disabled textarea is unusable and un-clickable.
Example:
HTML
<!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>
<textarea disabled>
This textarea field is disabled.
</textarea>
</body>
</html>
|
Output:
<fieldset>: When the disabled attribute is present, it specifies that the fieldset is disabled. A disabled fieldset is unusable and un-clickable.
Example:
HTML
<!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>
<p>This field set is disabled.</p>
<fieldset disabled>
Name: <input type="text"><br>
</fieldset>
</body>
</html>
|
Output:
<optgroup>: When the disabled attribute is present, it specifies that the optgroup is disabled. A disabled optgroup is unusable and un-clickable.
Example:
HTML
<!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>
<select>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by disabled attribute are listed below:
- Google Chrome
- Edge 12 and above
- Firefox
- Opera
- Safari