What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?

Question

I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.

Courtesan

related: "how to emulate the readonly attribute for a select tag, and still get the POST data?" #369313 – Cerelly

Answer 1

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.

Creaky

on readonly element you can't use CTRL + C but you can use right mouse click and select Copy. – Cyton

@Cyton are you sure about that? I just tested and was able to copy with the keyboard shortcut in Chrome on OS X. – Demilitarize

"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. – Tramway

In the current version of Chrome readonly elements cannot receive focus. This is problematic if you are expecting users to be able to scroll through values that are longer than the size of the input. – Helianthus

Also, if you're using Angularjs ng-readonly="true" allows the input to receive focus on Chrome, ie and firefox at least. It still does not allow scrolling to see the entire contents of a truncated input, but you can at least copy the text. – Helianthus

So it is my understanding that disabled implies readonly but readonly does not imply disabled. In other words if an element has the disabled attribute then there is no need to also include the readonly attribute. Correct? – Sequacious

Well 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 imply readonly. Values of disabled inputs do not get sent with the form data on submit, whereas values of readonly inputs do. – Sequacious

Answer 2

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

Indubitable

Answer 3

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".

Spartacus

Both readonly and disabled are boolean values. Use disabled instead of disabled="disabled" (same for readonly) – Signally

Both are semantically correct. HTML5 allows you to use either. – Spartacus

Context-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. – Multiracial

@Multiracial - I find the long duplicated form cumbersome. Why not use an empty string, which is also permitted? readonly="" – Smother

@Smother 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 – Multiracial

...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. – Multiracial

@Multiracial According to the WHATWG spec (HTML5 as of 2020): If a boolean attribute has a value (which would make it XML-compliant), there are only two valid values: the empty string, or a case-insensitive match for the attribute name. So selected="" is legal in HTML5. – Sequacious

@Sequacious I was talking about XHTML, not HTML. – Multiracial

Answer 4

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.

Neckcloth

Answer 5

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"

Expertise

yes that's one of the many consequence of making any field as disabled. Others include that field can't be focusable, edited, won't be sent with the form unlike with the readonly where field can't be focused, data can't be edited and sent when form is submitted. – Junko

Answer 6

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

Mcauley

Answer 7

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

Approbation

Answer 8

Basically, a read-only attribute means the element can't be edited by the user, but is sent with the form. A disabled attribute however means that the element can't be edited by the user, and won't be sent with the form. (P.S. Disabled elements also have lower opacity)

Meghan