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

Conclusion

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!