The HTML disabled attribute makes form elements unusable and unclickable.
Definition and Usage
➔ Using the disabled attribute prevents elements from receiving focus.
➔ When the disabled attribute is used, the elements are usually grayed out and their values are not submitted.
➔ The disabled attribute can be used on all standard form controls.
➔ Note: If the readonly attribute is used, the value of the element cannot be changed, focus can be received, and its value can be submitted.
Syntax
//In HTML
<form action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input readonly type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea disabled id="comment" name="comment" cols='55'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
//In Javascript
let element = document.querySelector("#comment");
element.disabled = false;
element.setAttribute("default", "");
element.setAttribute("disabled", "disabled");
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML disabled attribute example</h3>
<p>The disabled attribute makes form elements disable and unusable.</p>
<form action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input readonly type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea disabled id="comment" name="comment" cols='55'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
</div>
<p>Note: This form submission will not be processed by the server. </p>
</body>
<script>
function submit(e) {
e.preventDefault();
let id = e.target.id.value
let name = e.target.name.value;
alert("Form is submitted.\n" + "ID: " + id + "\nName: " + name);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.