Difference between read-only and disabled in input field HTML FORMS

Sometimes you need to display disabled data in <Forms/> ?, then you must be doing

 <input  value="xxx" disabled/>

Well, it is 100% correct way to do it.

But But But...

if you want to submit the data to backend? what you think is gonna happen?

thinking

You cannot submit disabled data.

yes, you read it right!

if you want to make a field "not editable" + send the data to the backend in <form/> submission,

you should use "read-only"

 <input  value="xxx" readonly="readonly"/>
 
 or
 
 <input  value="xxx" readonly/>

It won't show the disabled CSS by default, it display <input/> as the default behavior but you cannot edit anything there.

to put it briefly

readonly

will let you send data to the backend in FORM submission.

disabled

won't let you send data to the backend in FORM submission.

Both makes field not editable by user