The Current State of HTML5 Forms

The disabled Attribute

<input type="text" value="can't touch this" disabled>
<textarea disabled>You can't focus on this.... or can you?</textarea>

Live Demo

Text input
Textarea
Firefox
Safari
Safari Mobile
Chrome
10+
Opera
IE
Android
Supported Supported Supported Supported Supported Supported Supported

The Low Down

The disabled attribute makes the <input>, <textarea>, and <fieldset> descendants non-editable and excludes the disabled form control data from being sent to the server.

  • If the disabled attribute is set on a <fieldset>, the descendent form controls are disabled.
  • A disabled field can't be modified, tabbed to, highlighted, or have its contents copied. Its value is also ignored when the form goes thru constraint validation.
  • The disabled value is Boolean, and therefore doesn't need a value. But, if you must, you can include disabled="disabled".
  • Setting the value of the disabled attribute to null does not remove the effects of the attribute. Instead use removeAttribute('disabled').
  • You can target elements that are disabled with the :disabled pseudo-class. Or, if you want to specifically target the presence of the attribute, you can use input[disabled]. Similarly, you can use :enabled and input:not([disabled]) to target elements that are not disabled.
  • You do not need to include aria-disabled="true" when including the disabled attribute because disabled is already well supported. However, if you are programmatically disabling an element that is not a form control and therefore the disabled attribute does not apply, include aria-disabled="true".
  • The disabled attribute is valid for all form controls including all <input> types, <textarea>, <button>, <select>, <fieldset>, and <keygen>.