What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?
A 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.
Read more about this in this great article or the definition by w3c. To quote the important part:
Key Differences
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
<SELECT>
,<OPTION>
, and<BUTTON>
elements do not have readonly attributes (although they 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.
No events get triggered when the element is having disabled attribute.
None of the below will get triggered.
$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact
While readonly will be triggered.
$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.
For example:
<input type="text" name="yourname" value="Bob" readonly="readonly" />
This will submit the value "Bob" for the element "yourname".
<input type="text" name="yourname" value="Bob" disabled="disabled" />
This will submit nothing for the element "yourname".