Readonly and Disabled are two attributes used in a form. They both enable users not to change the content in the form field. However, there are minor 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, including select, radio, checkbox, And button.
However, after a form element is disabled, when we submit the form in POST or GET mode, the value of this element will not be passed out, readonly will pass this value out (this occurs when we set the textarea element in a form to disabled or readonly, but the submit button is usable ).
Generally, the following situations are commonly used:
In this case, if we use readonly to replace disabled, we can still use only the input (text/password) and textarea elements in the form. If there are other sending elements, such as select, you can press the Enter key to submit the changes (the default submit trigger button is press Enter ).
The disabled and readonly attributes share some similarities. For example, if both attributes are set to true, the form attributes cannot be edited. These attributes are often used together when writing JavaScript code, in fact, there are some differences between them.
If the disabled of an input item is set to true, the input item in the form cannot obtain the focus. All user operations (such as mouse clicks and keyboard input) are invalid for this input item, the most important thing is that when a form is submitted, this form input item will not be submitted.
Readonly only applies to text input items such as text input boxes. If it is set to true, users only cannot edit the corresponding text, but can still focus, and when submitting a form, this input item will be submitted as a form.
Tip: diabled can be replaced by readonly. background-color: # cccccc; add a gray background color.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">When the input field is diabled, the value cannot be obtained from time to time. Therefore, we can replace it with readonly to solve this problem.
This value is not obtained after being submitted in the form.
Change disabled = "disabled" to readonly = "readonly" and follow W3C specifications: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12
If the input parameter is set to disabled, the following restrictions apply:
The following restrictions apply to input with readonly:
Only the form element of successful is valid data, that is, it can be submitted. The disabled and readonly text input boxes can only be modified using scripts.
The effects and usage of these two attributes are different:
After setting the disabled attribute for div, the entire div is grayed out, but the content can still be entered in the text box. Note: The select drop-down box does not have the readonly attribute.
When we write a program, for example, a page for purchasing a product, we can enter the quantity of the product, however, the price is set to read-only, and the total price below is the price of the Number * read-only, so we are likely to do this by reading the textbox value of the number of items in the background, then read the textbox value of the price, and the product of the two will be used as the total amount uodate to the database. If the client user is a small programmer who will point the program like ours, in this case, you may need to pull it. You can view the source file, the id or name of the text box at readonly price, and enter a script in the browser to change the price value, then click Submit, so this small programmer can give himself a discount at will.
After setting the form submission method to get submission, we can see the submitted content in the url and find that the control set to disabled is not submitted to the server, readonly data is submitted to the server.
The following is a reference code for controlling disabled and readonly with js:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
