Sometimes when making a form, you want to display information in the form but you don’t want it editable. This is often the case for when you want to display a text box / text area that displays text that the user cannot change (Ex. editing a user profile but leaving the username untouched).

I feel most developers would add the disabled tag to accomplish this. This would suffice in certain situations but if you want to send the value when the form is submitted it will not.

Example of a disabled text box:

<input type=”text” name=”username” value=”johnsmithuser01″ disabled=”disabled” />

On the other hand, the readonly tag disables editing but will send the vale when the form is sent. Readonly should be the preferred attribute to use because in most cases you’ll want the value in that field for further use.

Example of a readonly text box:

<input type=”text” name=”username” value”johnsmithuser01″ readonly=”readonly” />

In short:

• Disabled should be used if you do NOT want to use the value in the field that isn’t editable.
• Readonly should be used when want to use the value in the field that isn’t editable.

A very subtle difference but one that matters.