I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things. I'm building an app that has to be Section 508-compliant (screen-reader accessible) and work clear back to IE 6.
readonly element is just not editable, but gets sent when the according
form submits. a
disabled element isn't editable and isn't sent on submit. Another difference is that
readonly elements can be focused (and getting focused when "tabbing" through a form) while
disabled elements can't.
The Disabled attribute
- Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to form check boxes that are not checked.)
- Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer 5.5 is particularly nasty about this.
- Disabled form elements do not receive focus.
- Disabled form elements are skipped in tabbing navigation.
The Read Only Attribute
- Not all form elements have a readonly attribute. Most notable, the
<BUTTON>elements do not have readonly attributes (although thy both have disabled attributes)
- Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
- Form elements with the readonly attribute set will get passed to the form processor.
- Read only form elements can receive the focus
- Read only form elements are included in tabbed navigation.