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

User · Answer

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

User · Answer

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

User · Answer

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  lt SELECT gt     lt OPTION gt    and  lt BUTTON gt  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

User · Answer

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   lt input type  text  id  disabledText  name  randombox  value  demo  disabled  disabled    gt    Reset button   lt button type  reset  id  clearButton  gt Clear lt  button gt    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

User · Answer

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

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

Examples related to html

Examples related to cross-browser