Detailed analysis of disabled and readonly HTML elements

AboutHTML ElementDetailed analysis of disabled and readonly

 

 

First, let's take a look at the differences between the two attributes in effect and usage.

Readonly and disabled both remove the functionality of the input field, but to different degrees. readonly locks the field: the user cannot change the value. disabled does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. in fact, a disabled field is not even sent if the form is submitted.

 

1. readonly is used to lock the control and cannot be modified on the interface (but it can be modified through JavaScript ).

2. Where disabled and readonly are the same, the user can lock this control and cannot change its value. However, disabled is more thorough, so that you cannot use it at all, this includes changing the background color (do not believe it, you modify an input text box that is disabled, and you find that you are in vain). If it is a checkbox, you cannot select it.

 

3. All controls have the disabled attribute, but not necessarily the readonly attribute. For example, select drop-down box

 

 

 

2) checkbox

 

 

3) Select drop-down box (only the difference between disabled and disabled can be displayed here, because select has no readonly attribute)

 

 

 

4) button

 

 

Note: clicking the "readonly" button can trigger the event, but the "disabled" button cannot be used, regardless of whether the event exists.

 

5) Div

 

 

Note: After setting the disabled attribute for the 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. Why? (THINKING ).

 

 

2. Let's take a look at the differences between the two attributes in data submission.

Let's write a test first.Code:

Code <Form ID = "form1" runat = "server"> <div> <asp: textbox id = "txt_disabled" runat = "server" text = "disabled" Disabled = "disabled"> </ASP: textbox> <br/> <asp: textbox id = "txt_readonly" runat = "server" text = "readonly" readonly = "true"> </ASP: textbox> <br/> <asp: textbox id = "txt_normal" runat = "server" text = "normal"> </ASP: textbox> <br/> <asp: button id = "btn_test" runat = "server" text = "submit data" onclick = "btn_test_click"/> <input type = "button" name = "btn_changevalue" value = "Change readonly value "onclick =" document. all ('txt _ readonly '). value = 'myzzb' "/> </div>
</Form>

Here, I wrote an ASP form page and submitted it using the get method.

 

From the submitted URL, we can see that the value of the disabled control is not submitted to the server. At this time, the value of the control cannot be obtained on the server,

On the contrary, the value of the text box set to readonly is submitted to the server.

 

 

Here is a strange situation. The readonly text box is set to readonly, but I used the following button to "change the readonly value"

Document. all ('txt _ readonly '). value = 'myzzb' the value displayed by readonly is myzzb. Now I have submitted the data and obtained the value myzzb on the server, but it is strange that, after the page is uploaded back, the readonly control of the page still displays the readonly value before myzzb. Why?

This is a small change made by Microsoft in. net2.0. If the readonly attribute of textbox is set to "true", viewstate will not be sent back to the server, although the client has changed. However, we can still use textbox. Attributes. Add ("readonly", "readonly.

Setting the readonly attribute of a control on the server is different from setting the readonly attribute of a text box on the client. On the server side, we use textbox. attributes. add ("readonly", "readonly") when the page is returned, even if the text box is readonly, it will change its value, will the client's modifications be displayed in client 2.0.

PS: In. NET 1.1, there will not be a situation where the upper face value is saved as the previous value.

 

 

You may think about a problem, that is, sometimes we writeProgramFor example, on a purchase page, we can enter the number of items on the page, but the price is set to read-only. The total price below is the number * read-only price, this is probably what we do. In the background, we read the textbox value of the number of items, then read the textbox value of the price, and then the product of the two is used as the total amount uodate to the database, if the client user is a small programmer who can point the program like ours, it may be difficult to pull it. He can view the source file, view the ID or name of the price text box of readonly, enter a script in the browser to change the price value, and click Submit, then this small programmer can give himself a discount at will.

As shown in the following column, enter the script in the browser to change the unit price, and then return at the point to see that the unit price has been changed.

 

 

 

 

 

So, what is the difference between setting readonly, disabled on the server side and setting readonly and disabled on the client side?

Now we can set these two controls on the server side. The Code is as follows:

 

 

Code protected void page_load (Object sender, eventargs E)
{
// Add the readonly and disabled attributes txt_readonly.attributes.add ("readonly", "readonly") to the control on the server ");
Txt_distabled.attributes.add ("disabled", "disabled ");
}

 

 

 

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 has been submitted to the server, as shown in:

 

 

This is the same as the client.

 

Through the above tests, the following points are described:

1. The client sets readonly, disabled, and the server sets readonly.

2. readonly data can be submitted to the server, and disabled data cannot be submitted to the server.

3. Set the textbox to readonly in. net1.1 after the client changes. The server will return the value changed with Js. NET 2.0 cannot be uploaded back to the client, unless you set its readonly attribute on the server side (this is the same as 1.1 ).

4. the textbox set to readonly will submit the data modified on the client to the server. As a programmer, do not modify this value during update, if you do this on a shopping website, you're done.

5. Use txtbox. Enabled = false on the server side. diabaled is added to the textbox during client parsing. That is to say, the data cannot be submitted to the server.

 

From the submitted URL, we can see that the value of the disabled control is not submitted to the server. At this time, the value of the control cannot be obtained on the server,

On the contrary, the value of the text box set to readonly is submitted to the server.

 

 

 

Display and operation differences after disabled and readonly controls:

1) Input textbox