What is the difference between disabled and readonly (HTML inputs)
In this article we will learn the difference between disabled and readonly and also when using each of these HTML input attributes.
Hey you all guys, Is everything Ok? Let’s learn more about HTML and its input attributes!
Apparently both inputs with this attribute work the same way, because the style is very similar
But it’s not quite like that, with the disabled attribute the value of the input cannot be edited, however when the form of this input is sent, the data that is in an input with disabled will NOT be sent
So be careful, you cannot rely on this data in processing this form.
Here’s an example of the input with disabled:
<input type="text" name="name" disabled="disabled" />
But the input that appears as the readonly attribute also cannot be edited, so this functionality both of them have in common
However, when submitting the form, the data of this input that is readonly will be sent
This is the big difference!
See an input as readonly:
<input type="text" name="name" readonly="readonly" />
A Practical Case
So if you are going to make an address form with auto-completion of information via the user’s zip code
You must use readonly in the inputs that are filled in, because if you use disabled, the data that were automatically filled in will not be sent
In this article we learned the difference between disabled and readonly
The disabled does not send the data along with the other inputs of the form and we cannot edit the data of this input
As for readonly, we can’t edit it either, but the data is sent in the request
Do you wanna learn more about HTML? Click here!