Talking about the difference between input read-only attribute readonly and disable in HTML


Readonly and Disabled are both able to make it impossible for users to change content in form fields. But there are slight differences between them, which can be summarized as follows:

Readonly is valid for input (text / password) and textarea, while disabled is valid for all form elements, but when disabled is used, when we submit a form as POST or GET, the value of this element will not be passed out, and readonly will pass the value out.(Readonly accepts value changes that can be returned, disable accepts changes but does not return data).

Generally, the most common cases are:

1. A unique identification code is pre-filled for the user in a form, and the user is not allowed to change it.However, the value needs to be passed when submitting, and its property should be set to read only.

2. Often, when users submit the form formally, they need to wait for the information validation of the administrator. This does not allow users to change the data in the form, but can only view it. Because the scope of the disabled elements is large, disabled should be used at this time, but at the same time, it should be noted that submit button is also disabled. Otherwise, as long as the user presses this button, if the integrity check is not done in the database operation page, the value in the database will be cleared. If there are only input (text / password) and textarea elements in the form, it is still possible to replace disabled with readonly in this case. If there are other sending elements, such as select, the user can submit by pressing the return key after rewriting the value (return is the default submit trigger button).

3. We often press the submit button.Use JavaScript to disable the submit button.That’s all right.PreventIn the environment of poor network conditions,Repeated submission by usersButtons cause data to be redundantly stored in the database.

Disabled and readonly have something in common. For example, if they are both set to true, the form attribute will not be edited. It is easy to mix the two attributes when writing JS code.In fact, there are some differences between them:

If disabled of an input item is set to true,Then the form input item can’t get the focus, user’sAll operations (mouse clicks, keyboard input, etc.) are invalid for this input itemMost importantly, when submitting a form, the formThe entry will not be submitted.

andReadonly for text input boxesThis type of input can be entered into the text ifSet it to true.Users are justThe corresponding text cannot be edited.But you can still focus on it, and when you submit a form, the input will be submitted as a form.  

The difference between input read-only attribute readonly and disable in html is that the editor shares all the content with you. I hope you can give us a reference and support developpaer more.

Original address: