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

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

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

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

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