Readonly and Disabled Form Fields
When you have a form with fields you don't want the user to change, there is a choice of two attributes built into HTML to accomplish that.
The two attributes are readonly and disabled. They have only one thing in common: preventing field value change. Otherwise, each is unique.
| Attribute | Prevent Change | Field Submits | Field Value Color |
readonly |
✔ | ✔ | Default | disabled |
✔ | ✖ | Grayed |
|---|
The field values of both readonly and disabled cannot be changed. If it can be changed on the screen, the form submission will include the unchanged version, not the changed.
When the form submits, readonly fields will be included. However, on form submission, readonly fields will be absent from the submission.
The readonly field value color is whatever the browser determines is its default. The disabled field value color is almost always grayed out to indicate it's a non-interactive field.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
