A brief discussion on the difference between readonly and disable input read-only attributes in HTML

Readonly and Disabled can both prevent users from changing the content in the form field. But there are slight differences between them, which are summarized as follows:

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

Generally the more common situations are:

1. A unique identification code is pre-filled in a form for the user, and the user is not allowed to change it, but the value needs to be passed when submitting. , its attribute should be set to readonly at this time.

2. It is often encountered that when a user formally submits a form and needs to wait for information verification by the administrator, the user is not allowed to change the data in the form, but can only view it. Due to the scope of disabled elements, the user is not allowed to change the data in the form. Large, so 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 there is no integrity check in the database operation page, the value in the database will be Cleared. If readonly is used instead of disabled in this case, it is still possible if there are only input (text/password) and textarea elements in the form. If there are other elements, such as select, the user can rewrite the value and press Press the Enter key to submit (Enter is the default submit trigger key)

3. We often use JavaScript to disable the submit button after the user presses the submit button, which can prevent environments with poor network conditions. Next, the user repeatedly clicks the submit button, causing data to be redundantly stored in the database.

The two attributes disabled and readonly have something in common. For example, if both are set to true, the form attribute cannot be edited. It is often easy to mix these two attributes when writing js code. In fact, they There is a certain difference between them:

If the disabled of an input item is set to true, the form input item cannot obtain focus, and all user operations (mouse clicks and keyboard input, etc.) will affect the input item. Invalid, the most important point is that when the form is submitted, this form input will not be submitted.

Readonly is only for input items such as text input boxes that can input text. If set to true, the user just cannot edit the corresponding text, but can still focus, and when submitting the form, the input The item will be submitted as an item on the form.

The above article briefly discusses the difference between readonly and disable input read-only attributes in HTML. This is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles on the difference between readonly and disable input read-only attributes in HTML, please pay attention to the PHP Chinese website!