I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.
7 Answers
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.
-
5on readonly element you can't use CTRL + C but you can use right mouse click and select Copy.– RumplinJan 22, 2014 at 10:49
-
11@Rumplin are you sure about that? I just tested and was able to copy with the keyboard shortcut in Chrome on OS X. Jul 9, 2014 at 15:43
-
7"Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly attributes (although thy both have disabled attributes)". Thats why sometimes you have to use "disabled" attribute with a hidden input field for select forms.– DonatoMay 26, 2015 at 18:54
-
7So it is my understanding that
disabled
impliesreadonly
butreadonly
does not implydisabled
. In other words if an element has thedisabled
attribute then there is no need to also include thereadonly
attribute. Correct?– chharveyDec 6, 2015 at 18:43 -
1Well i came here to correct the comment above me but then i realized it was my past self :facepalm:. But to answer my own question: no,
disabled
does not implyreadonly
. Values ofdisabled
inputs do not get sent with the form data on submit, whereas values ofreadonly
inputs do.– chharveyJul 11, 2020 at 0:17
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".
-
8Both
readonly
anddisabled
are boolean values. Usedisabled
instead ofdisabled="disabled"
(same for readonly)– RaptorJan 6, 2014 at 12:03 -
11Both are semantically correct. HTML5 allows you to use either. Jan 6, 2014 at 19:22
-
4Context-free admonition to use only the attribute names, without values, is ill-advised - because then the code will not be valid XML/XHTML. I know a lot of devs don't care about those, but they should at least be aware of the pitfall. Personally I strive for XHTML compliance - unless given a compelling reason, which I haven't received yet - so I use the long/duplicated form. Sep 3, 2015 at 12:15
-
1@ToolmakerSteve Do you have a spec citation that empty strings are valid XHTML? I can only find commentary pages saying it's valid for HTML5. Everyone I've seen talking about XHTML say that its form for boolean attributes must be
attrname="attrname"
. Either way, it doesn't seem to be particularly well-documented, at least not that I can find. Well, there's this - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - but it only specifically mentions SGML and HTML, not XHTML.... too many acronyms :S Sep 1, 2016 at 11:14 -
1...but skipping over the bit for HTML, where presence/absence is sufficient - we get this, which presumably applies by omission to XHTML:
Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").
So the empty string doesn't seem to be valid. Sep 1, 2016 at 11:20
Same as the other answers (disabled isn't sent to the server, readonly is) but some browsers prevent highlighting of a disabled form, while read-only can still be highlighted (and copied).
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
If the value of a disabled textbox needs to be retained when a form is cleared (reset), disabled = "disabled"
has to be used, as read-only textbox will not retain the value
For Example:
HTML
Textbox
<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />
Reset button
<button type="reset" id="clearButton">Clear</button>
In the above example, when Clear button is pressed, disabled text value will be retained in the form. Value will not be retained in the case of input type = "text" readonly="readonly"
The difference between disabled and readonly is that read-only controls can still function and are still focusable, anddisabled controls can not receive focus and are not submitted with the form
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met while the disabled attribute can be set to keep a user from using the element