`Input Disabled HTML Attribute Explained For Inexperienced Coders`

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute of: How To Use Input To Create Form Fields In HTML: Easy Tutorial
What does Input Disabled HTML Attribute Explained For Inexperienced Coders do?: Disables the input field.

Code Example

<form>
 <label for="disabled">Disabled</label><br>
 <input name="disabled" value="You cannot edit me." disabled>
</form>

`disabled` vs. `readonly`

The disabled and readonly attributes have similar effects — in fact, they look the same from the user’s perspective. In both cases, what the user sees is a field that is slightly “grayed out”, which cannot be clicked on or edited.

<form>
 <label for="disabled">Disabled</label><br>
 <input name="disabled" value="disabled" disabled>
 <br><br>
 <label for="readonly">Readonly</label><br>
 <input name="readonly" value="readonly" readonly>
</form>

Disabled

Readonly

However, they are different and using the wrong one can cause problems.

If a field is disabled, the value of the field is not sent to the server when the form is submitted. If a field is readonly, the value is sent to the server.

Protip: If there is some reason that you _really_ do not want a particular field’s value to be included in a form submission request, you might want to look at your server-side form handling. It is possible for a malicious user to override your form input’s disabled attribute and send whatever form data they like. This is true of any element, actually — never forget to consider server-side form validation and sanitizing.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for disabled


All	All	All	All	All	All

Code Example

disabled vs. readonly

Browser Support for disabled

`disabled` vs. `readonly`