In-depth understanding of the difference between Readonly and Disabled in form forms

This article mainly introduces the difference between Readonly and Disabled in the form. It is very detailed and comprehensive. Friends who need to know the relevant information should come and study it carefully.

Readonly is only valid for input (text / password) and textarea, while disabled is valid for all form elements, including select, radio, checkbox, button, etc.

But after the form element is disabled, when we submit the form by POST or GET, the value of this element will not be passed out, and readonly will Pass it out (this situation occurs when we set the textarea element in a form to disabled or readonly, but the submit button can be used).

Generally common situations are:

A unique identification code is pre-filled in a form for the user, and the user is not allowed to change it, but when submitting When you need to pass this value, its attribute should be set to readonly.

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 large range of disabled elements, the user is not allowed to change the data in the form. , 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 Clear.

If readonly is used 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 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 an environment with poor network conditions, 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 when writing js code. There are actually certain differences between the two attributes.

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.) are invalid for the input item. The most important thing is that when the form is submitted, the form input will not be submitted.

Readonly is only for input items such as text input boxes where text can be entered. If set to true, the user just cannot edit the corresponding text, but can still focus and submit When entering a form, the input item will be submitted as an item of the form.

JQuery sets and removes the disabled attribute

//Two methods to set the disabled attribute

$('#areaSelect').attr("disabled",true);

$('#areaSelect').attr("disabled","disabled");

//Three methods to remove the disabled attribute

$('#areaSelect').attr("disabled",false);

$('#areaSelect') .removeAttr("disabled");

$('#areaSelect').attr("disabled","");

The above is the entire content of this article, I hope everyone To be able to like.

【Recommended tutorials】

1. CSS video tutorial
2. CSS online manual
3. bootstrap tutorial