HTML disabled Attribute

What You’ll Learn

The disabled attribute is a boolean attribute that turns off user interaction on form controls. When present, the control cannot be clicked, typed in, or focused, and its value is not sent when the form is submitted. It is essential for guiding users and preventing invalid actions.

Purpose of disabled

The primary purpose of the disabled attribute is to prevent user interaction with a form control when it should not be used. Common cases include a submit button that stays disabled until required fields are filled, shipping fields hidden when pickup is selected, or options that do not apply to the current form state.

Disabled controls are visually de-emphasized by browsers (often grayed out) and are removed from the tab order. They also skip HTML constraint validation and are not included in form submission data.

📝 Syntax

Add the disabled attribute to any supported form control:

<form>

  <input type="text" name="username">

  <button type="submit" disabled>Submit</button>

</form>

Syntax Rules

• Boolean attribute: write disabled alone or as disabled="".
• In JavaScript, use element.disabled = true or false.
• Do not use non-empty values like disabled="true" in HTML (browsers treat any presence as disabled).
• A disabled <fieldset> disables all nested controls except the legend in some cases.

💎 Values

The disabled attribute is a boolean attribute. It has no meaningful string values:

• Attribute present — Control is disabled (no interaction, not submitted).
• Attribute absent — Control is enabled and behaves normally.

<!-- Recommended -->

<button disabled>Save</button>



<!-- Also valid (XHTML-style) -->

<button disabled="">Save</button>



<!-- JavaScript -->

<script>btn.disabled = true;</script>

Applicable Elements

disabled vs readonly

Examples Gallery

Disabled submit buttons, JavaScript toggling, and fieldset groups with readonly comparison.

<form>

  <label for="username">Username</label>

  <input type="text" id="username" name="username">



  <label for="password">Password</label>

  <input type="password" id="password" name="password">



  <button type="submit" disabled>Submit</button>

</form>

<input type="text" id="name">

<button type="submit" id="submitBtn" disabled>Submit</button>



<script>

  nameInput.addEventListener("input", function () {

    submitButton.disabled = nameInput.value.trim() === "";

  });

</script>

<fieldset disabled>

  <legend>Shipping</legend>

  <input type="text" name="city">

  <input type="text" name="zip">

</fieldset>

♿ Accessibility

• Use native disabled on form controls — Browsers expose disabled state to assistive technology automatically.
• Explain why controls are disabled — Add helper text near grayed-out fields so users know what to do next.
• Do not rely on color alone — Pair visual styling with clear labels and instructions.
• Avoid disabling the only path forward — Tell users how to enable the control (e.g. “Fill required fields”).
• For non-form elements — Use aria-disabled="true" and block pointer events with JavaScript; native disabled does not apply to <div> or <a>.

💡 Best Practices