A detailed explanation of the subtle differences between Readonly and Disabled
|
Readonly and Disabled both prevent users from changing the contents of form fields. But there are subtle differences between them, summarized as follows: Readonly is only valid for input (text / password) and textarea, while disabled is valid for all form elements. However, after a form element is disabled, when we submit the form via POST or GET, the value of this element will not be passed out, while readonly will pass the value out (readonly accepts value changes and can be sent back, while disable accepts changes but does not send back data). The more common situations are: In a form, a unique identification code is pre-filled for the user, and the user is not allowed to change it. However, the value needs to be passed when submitting. In this case, its attribute should be set to readonly. It is often encountered that after the user formally submits the form, he needs to wait for the administrator to verify the information. This does not allow the user to change the data in the form, but can only view it. Since disabled has a wide range of elements, it should be used at this time. However, it should be noted that the submit button should also be disabled. Otherwise, as long as the user presses this button, if the integrity check is not performed on 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 OK 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 the Enter key to submit (Enter is the default submit trigger key) We often use JavaScript to disable the submit button after the user presses it. 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 disabled and readonly attributes have some similarities. 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, there are some differences between them: If an input item's disabled is set to true, the form input item cannot get the focus, and all user operations (mouse clicks and keyboard input, 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 such as text input boxes where text can be entered. If it is set to true, the user just cannot edit the corresponding text, but can still focus on it, and when submitting the form, the input item will be submitted as an item of the form. |
<<: jQuery implements all shopping cart functions
>>: Solve the problem that the IP address obtained using nginx is 127.0.0.1
Recommend
A brief analysis of adding listener events when value changes in html input
The effect to be achieved In many cases, we will ...
Zabbix configures DingTalk's alarm function with pictures
Implementation ideas: First of all, the alarm inf...
Detailed explanation of importing/exporting MySQL data in Docker container
Preface We all know that the import and export of...
Vue+ssh framework to realize online chat
This article shares the specific code of Vue+ssh ...
Two common solutions to html text overflow display ellipsis characters
Method 1: Use CSS overflow omission to solve The ...
Detailed explanation of javascript event bubbling, event capture and event delegation
1. Event bubbling : In the process of JavaScript ...
HTML+CSS+jQuery imitates the search hot list tab effect with screenshots
Copy code The code is as follows: <!DOCTYPE ht...
Things to note when writing self-closing XHTML tags
The img tag in XHTML should be written like this:...
Use shell script to install python3.8 environment in CentOS7 (recommended)
One-click execution To install Python 3.8 in a vi...
Detailed explanation of how to select all child elements using CSS
How to recursively select all child elements usin...
HTML table markup tutorial (43): VALIGN attribute of the table header
In the vertical direction, you can set the alignm...
Vue globally introduces scss (mixin)
Table of contents 1. mixin.scss 2. Single file us...
How to completely uninstall Docker Toolbox
Docker Toolbox is a solution for installing Docke...
Display special symbols in HTML (with special character correspondence table)
Problem Reproduction When using HTML for editing,...
A brief discussion on order reconstruction: MySQL sharding
Table of contents 1. Objectives 2. Environmental ...