Actually both “disabled” and “readonly” primarily stops us to change the input field. But both have few basic differences. Check out the name once again “DIS-ABLED” and “READ-ONLY“. “Disabled” signifies something not functioning completely. While “Readonly” let us know that we have something live which we can read-only. That’s it, this is the basic difference !
A read-only input field can not be modified. But we can tab it, highlight it, and copy the text from it. With “disabled” input field we can do any of these things. Another important difference between both of them is — the content of the “disabled” input field will not be submitted with the form. And the content of the “readonly” input field will be submitted with the form.
Basically we can say the “readonly” attribute merely prevents us from changing the value of the field, event though we can continue interacting with the field in different ways. And “disabled” attribute actually prevents us from using the field completely.