ReadOnly and disabled are the two attributes that are used in the form, and they all enable users to not change the content in the form fields. But there is a slight difference between them, summed up as follows:
ReadOnly is valid only for input (Text/password) and textarea, and disabled is valid for all form elements, including Select, Radio, CheckBox, Button, and so on.
However, when the form element is used with disabled, when we submit the form as a post or get, the value of this element is not passed out. and ReadOnly will pass the value out (this happens when we set the TEXTAREA element in a form to Disabled or readonly, but the Submit button is available).
In general, the common situation is:
The user is pre-populated with a unique identification code in a form that does not allow the user to change, but is required to pass the value at the time of submission, and its properties should be set to ReadOnly.
Often encountered when the user formally submitted the form to wait for the administrator's information validation, which does not allow the user to change the data in the form, but only to see, because the disabled of the scope of the elements, so should be used at this time disabled, but should also note that the submit button also disabled off, otherwise as long as the user presses this button, if the database Operation page does not do integrity detection, the value in the database will be cleared.
If in this case use readonly instead of disabled, if the form has only input (Text/password) and textarea elements, it is still possible, if there are other hair elements, such as SELECT, The user can press ENTER to submit after rewriting the value (enter is the default submit Trigger button).
We often use JavaScript to disabled the submit button after the user presses the Submit button, which prevents the network condition from being poor, and the user repeatedly submits the button causing the data to be redundantly stored in the database.
Disabled and ReadOnly These two properties have some similarities, such as all set to true, then the form property will not be edited, often in writing JS code when it is easy to mix these two properties, in fact, there is a certain difference between them.
If the disabled of an entry is set to True, the form entry cannot get the focus, all actions of the user (mouse click and keyboard input, etc.) are not valid for the entry, and most importantly, when the form is submitted, the form entry will not be submitted.
ReadOnly is just an input to text input boxes, and if set to true, the user simply cannot edit the corresponding text, but can still focus the focus, and when the form is submitted, the entry is submitted as a form.
Tip: diabled can be replaced with ReadOnly, Background-color: #cccccc, plus a gray background color.
View Sourceprint?
01
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
02
03
04
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
05
<title>untitled document</title>
06
07
08
<body>
09
<form id= "Form1" Name= "Form1" method= "Get" action= "" >
10
<input name= "Q1" type= "text" id= "Q1" value= "readonly" readonly= "true"/>
11
<input name= "Q2" type= "text" disabled= "disabled" id= "Q2" value= "disabled"/>
12
<input type= "Submit" name= "submit" value= "Submit"/>
13
</form>
14
</body>
15
The field of input is not worth the time it is diabled, so don't use this recently, we can solve this problem with readonly with substitution.
1
<input name= "Nowamagic" id= "Nowamagic" size= "" value= "Disabled" disabled= "disabled" >
The value is not reached after it is submitted in the form form.
Change disabled= "Disabled" to ReadOnly = "ReadOnly", according to the specifications: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12
Input that is set to disabled will have the following limitations:
Cannot receive focus
You will be skipped when you use the TAB key
Probably not successful.
Input that is set to ReadOnly will have the following limitations:
Can receive focus but cannot be modified
You can use the TAB key to navigate
It could be successful.
Only successful form elements are valid data, which can be submitted. The text input box for disabled and readonly can only be modified by scripting the Value property.
The difference between the two properties in effect and usage:
ReadOnly is going to lock this control by not modifying him on the interface (but he can be modified by JavaScript).
Disabled and ReadOnly have the same place also can lock this control user cannot change his value, but disabled more thoroughly, he is going to make you completely unable to use him, including changing his background color (unbelief, You go to modify a disabled input text box, you find that you are in vain), if it is a checkbox you can not select him.
All controls have the disabled property, but there is not necessarily a readonly property, such as the Select drop-down box. Clicking on a button that is readonly can also trigger an event, but the button that is disabled off cannot be used regardless of whether there is an event on it.
After the DIV is set to the Disabled property, the entire div is grayed out, but the text box can still be entered. Note: The Select drop-down selection box is not a ReadOnly property
People think about a problem arises, that is, sometimes when we write programs, such as a purchase of goods page, we can enter the quantity of goods, but the price we set to read-only, and finally below a total price is the quantity * read-only price, then we are likely to do so, In the background, read the textbox value of the product quantity, and then read the value of the textbox of the price, and then the product of both as the total amount uodate to the database, if the client's user and we are the same as a small programmer will point the program, then the trouble is possible to pull, he can view the source file, Look at the readonly price of the text box ID or name, and then enter a script in the browser to change the value of the price, and then click Submit, then the small programmer can just give yourself a discount.
We set the form's submission method to get commit, we can see the content of the submission in the URL, found that the control set to disabled is not submitted to the server, readonly the submission data to the server.
about using JS to control disabled and readonly problems, here is a reference code:
01
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
02
03
04
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
05
<title> Untitled Document </title>
06
07
08
<body>
09
<form enctype= "Multipart/form-data" action= "sign.php" method= "post" name= "Moblie_act_form" id= "Moblie_act_form" >
10
<input type= "text" class= "input" id= "mobile" name= "mobile" value= "{$mobile}" readonly= "true" disabled= "disabled" >
11
<input type= "button" value= "Modify" onclick= "Modify_phone ()" >
12
</form>
13
14
<script language= "JavaScript" >
15
function Modify_phone () {
16
if (Confirm ("Are you sure you want to change your phone number?") ")){
17
Document.moblie_act_form.mobile.readOnly = false;
18
document.moblie_act_form.mobile.disabled = false;
19
}
20
return true;
21st
}
22
</script>
23
</body>
24
Differences between ReadOnly and disabled in a form
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
