Two ways to disable form control in HTML readonly and disabled

Time:2019-11-20

In the process of making web pages, we often use forms. But sometimes we want the controls on the form to be immutable. For example, in the password changing web page, the text box displaying the user name should be immutable.

There are two ways to disable HTML, which are:

1. Add readonly = readonly to the control label
2. Add the disabled = disabled attribute to the control label

For example:

Copy code

The code is as follows:

< input type = “text” value = “read only” readonly = “readonly” / >
< input type = “text” value = “unavailable” disabled = “disabled” / >

Both of the controls in the example are immutable. But they also have some differences!

We can see from the literal meaning that the control that tries the readonly property is “read-only”, while the control that tries the disabled property is “disabled”. So what’s the difference between them?

A read-only control (a control that uses the readonly property) can’t be modified by the user with the mouse or keyboard, but the programmer can use JavaScript to modify it. When the form is submitted, the name and value of the control will be submitted to the server, that is, it’s visible to the server.

The disabled control (the control with the disabled attribute) is not only not allowed to be modified by the user with the mouse and keyboard, but also invisible to the server, that is, when the form is submitted, its name and value will not be submitted to the server, of course, the programmer can also modify its value with JavaScript.

This is the difference between them. After we know the difference, we should know when to use which method. We must not be blind!