Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator

What is the readonly attribute in HTML?

Gutha Vamsi Krishna

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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>

Output

RELATED TAGS

html
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring