Readonly and Disabled both enable users to not change content in the form field. But there are slight differences between them, and the summary is as follows:
Readonly only works for input(text/password) and textarea, while disabled is valid for all form elements. However, after the form element uses disabled, when we submit the form in POST or GET, the value of this element will not be passed out, and readonly will pass the value out (readonly accepts the value change and can be passed back, disable accepts the change but does not return the data).
Generally, the most commonly used situations are:
A unique identification code is prefilled for the user in a form, and the user does not allow changes, but the value needs to be passed when submitting, and its properties should be set to readonly.
It is often encountered when the user officially submits the form and needs to wait for the administrator's information to verify. This does not allow the user to change the data in the form again, but can only view it. Since the range of disabled elements is large, disabled should be used at this time, but at the same time, it should be noted that the submit button should also be disabled. Otherwise, as long as the user presses this button, if no integrity detection is performed in the database operation page, the value in the database will be cleared. If you use readonly instead of disabled in this case, if there are only input (text/password) and textarea elements in the form, it is still possible. If there are other sending elements, such as select, the user can press the Enter key to submit after rewriting the value (Enter is the default submit trigger key)
We often use javascript to disable the submit button after the user presses the submit button. This can prevent the user from repeatedly clicking the submit button in environments with poor network conditions, causing data to be redundantly stored in the database.
The two properties of disabled and readonly have some commonalities. For example, if both are set to true, the form property will not be edited. It is often easy to mix these two properties when writing JS code. In fact, there are certain differences between them:
If the disabled of an input item is set to true, the form input item cannot get focus, and all user's operations (mouse clicks and keyboard inputs, etc.) are invalid for the input item. The most important point is that when the form is submitted, the form input item will not be submitted.
Readonly is only for input items that can enter text such as text input boxes. If set to true, the user just cannot edit the corresponding text, but can still focus on the focus, and when submitting the form, the input item will be submitted as a form.