What is the readonly attribute in HTML?
The readonly attribute is used when we don’t want users to modify the default value present in the input element.
Note that the readonly input value is submitted while submitting the form.
For example, we may want to restrict the user from filling in the country code. However, we want to include it in the form while submitting it. In this case, we can keep the country code input element as read-only.
We can use the readonly attribute with the following syntax.
Syntax
<input readonly>
Let’s take a look at an example:
Example
In the following example, we take the phone number as input from the user. We prevent the user from changing the country code by providing the readonly attribute on the country code input element. Here, the default value is +91.
Code
<html><head></head><body><div id="content"><!-- readonly attribute --><input type="text" value="+91" readonly><input type="number" placeholder="Enter phone number here"></div></body></html>