The Current State of HTML5 Forms

The readonly Attribute

<input type="text" value="can't touch this" readonly>
<textarea readonly>You can't change this… or can you?</textarea>

Live Demo

Text input
Safari Mobile
Supported Supported Supported Supported Supported Supported Supported

The Low Down

The readonly attribute makes a form control non-editable (or "read only").

  • A read-only field can't be modified, but, unlike disabled, you can tab into it, highlight it, and copy its contents.
  • Setting the value to null does not remove the effects of the attribute. Instead use removeAttribute('readonly').
  • You can target elements that are read only with the :read-only pseudo-class, and its writability with the :read-write pseudo-class. Or, if you want to specifically target the presence of the attribute, you can use input[readonly] and input:not([readonly]).
  • readonly is only relevant for type text, search, url, tel, email, number, password, and the date/time input types. It is also valid on <textarea>
  • readonly is ignored for type hidden, range, color, checkbox, radio, file, button, submit and image.