The disabled attribute

The disabled attribute disables the HTML form element, i.e. makes it inactive. It is an attribute without a value.

Locking elements is usually done to prevent the user from changing some values (which should nevertheless be displayed to the user as form elements). Sometimes elements are locked (and unlocked) using JavaScript.

Behavior

In the case of a button (button or input with the type attribute set to button, reset, or submit), blocking means that the button cannot be clicked. In the case of a text input field (input or textarea), you won't be able to change or copy the text in it. In the case of checkboxes and radios, their state (checked or unchecked) won't be able to be changed. In the case of drop-down lists select, you won't be able to change the selected list item.

A blocked element has a gray background by default. It will also not participate in Tab navigation.

Example . Locked button

Let's block the button using the disabled attribute. For comparison, here is an example of an unblocked button (let's try clicking on it):

<button disabled>text</button>
<button>text</button>

Example . Disabled checkbox

Now let's look at the disabled checkbox. For comparison, here's an example of an unlocked checkbox:

<input type="checkbox" disabled>
<input type="checkbox">

Example . Locked and checked checkbox

Let's see what a checkbox looks like when it is blocked and marked with the checked attribute. For comparison, let's look at an example of an unblocked marked checkbox:

<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Example . Blocked text input

Now let's block input. For comparison, let's look at an example of an unblocked input:

<input type="text" value="text" disabled>
<input type="text" value="text">

Example . Blocked textarea

And here we see a blocked textarea (note that the size of a blocked textarea can be changed). For comparison, let's look at an example of an unblocked textarea:

<textarea disabled>text</textarea>
<textarea>text</textarea>

Example . Locked dropdown list

Let's see how the blocked select works. For comparison, let's look at an example of an unblocked drop-down list:

<select disabled>
	<option>city1</option>
	<option selected>city2</option>
	<option>city3</option>
	<option>city4</option>
</select>
<select>
	<option>city1</option>
	<option selected>city2</option>
	<option>city3</option>
	<option>city4</option>
</select>