November 8, 2022

How to Make Input Field Read Only in HTML

In this tutorial, you will learn how to make input field read only in HTML. When you are creating a form, you might want the content of an input field to be read only for the users.

To make the input field read only, we have to use readonly attribute. The readonly attribute is a Boolean attribute. The readonly attribute is used to specify that the input field is read only and any value inside the input field, could not be changed.

In the following example, we will make an input field read only. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have 2 elements (label and input).
The label element is used to specify a label for an input field. The value of for attribute is set to the country of the corresponding input field.
The input element specifies an input field where the user can enter data.
The input has a type attribute with a value of the text, a name attribute with the value of the country, an id attribute with a value of the country, and a value attribute with a value of India. The readonly attribute specifies that the input field is read only.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input field read-only</title>
</head>

<body>
    <label for="country">Country:</label>
    <input type="text" name="country" id="country" value="India" readonly>

</body>

</html>

You May Also Like: