The difference between readonly and disabled in HTML

Source: Internet
Author: User

keywords: javascriptReadOnly 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. But when the form element is disabled, when we submit the form as a post or get, the value of the element is not passed out, and readonly passes the value out ( This situation occurs 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:

① A unique identification code is pre-populated for the user in a form, the user is not allowed to change, but the value needs to be passed at the time of submission, and its properties should be set to ReadOnly

② often encounter when the user formally submits 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 use the disabled at this time, 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 re-overwriting 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.


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>untitled document</title>

<body>
<form id= "Form1" Name= "Form1" method= "Get" action= "" >
<input name= "Q1" type= "text" id= "Q1" value= "readonly" readonly= "true"/>
<input name= "Q2" type= "text" disabled= "disabled" id= "Q2" value= "disabled"/>
<input type= "Submit" name= "submit" value= "Submit"/>
</form>
</body>

Tips:
diabled: Can be replaced by ReadOnly, Background-color: #cccccc; plus a gray background color. reprinted from: http://blog.csdn.net/fancyerii/article/details/4083353

The difference between readonly and disabled in HTML (RPM)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.