The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled.
This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Then, it is possible to make the element usable again, removing the disabled value by JavaScript. The disabled attribute is commonly grayed out.
You can use the disabled attribute on the following elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, and <textarea>.
When the disabled attribute is applied to an element, the :disabled pseudo-class also applies to it. The elements supporting the disabled attribute but not having the attribute set match the :enabled pseudo-class.
Syntax
<tag disabled></tag>Example of the HTML disabled attribute used on the <button> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br><br>
<button type="button" disabled>Disabled button</button>
</body>
</html>Example of the HTML disabled attribute used on the <fieldset> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text">
</div>
<div>
<label>Last Name:</label>
<input type="text">
</div>
<div>
<label>Date of birth:</label>
<input type="text">
</div>
</fieldset>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <input> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Example of the HTML disabled attribute used on the <optgroup> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Example of the HTML disabled attribute used on the <option> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <select> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <textarea> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <textarea> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.