disabled

The boolean HTML disabled attribute makes a form control unavailable for interaction. A disabled control is also excluded from form submission.

What you will learn

How disabled makes a form control unavailable
Why a disabled value is not included in form submission
How it differs from readonly and aria-disabled

Basic syntax

<button type="submit" disabled>Send</button>
<input type="text" name="account" value="example" disabled>

Boolean attributes are enabled by their presence. Writing disabled="false" still disables the control; remove the attribute to enable it.

Disabled values are not submitted

If an input, select, or textarea is disabled when a form is submitted, its name and value are not included in the form data. Do not disable a field merely to prevent editing if the server still needs its value.

<input name="plan" value="pro" disabled>
<!-- plan is not sent with the form -->

disabled, readonly, and aria-disabled

disabled: Prevents interaction for supported form controls and excludes their values from submission.
readonly: Prevents editing for supported text controls, but the value can remain part of form submission and the control can still be focusable.
aria-disabled="true": Communicates an unavailable state to assistive technology, but does not automatically prevent clicks, focus, or form submission. Your code must enforce the behavior.

Enable it when the user is ready

A common pattern is to disable a dependent control until a required choice is made. Update the actual HTML property and make the state understandable to keyboard and assistive-technology users.

<select id="country" name="country">...</select>
<button id="continue" type="button" disabled>Continue</button>

<script>
  country.addEventListener('change', () => {
    continueButton.disabled = !country.value;
  });
</script>

Common mistakes

Using disabled="false" and expecting the control to be enabled.
Disabling a field whose value must be sent to the server.
Using aria-disabled alone and forgetting to block the action in JavaScript.
Leaving a control disabled without explaining what the user must do next.