HTML - readonly Attribute

The HTML readonly attribute is used to specify that an input, or textarea field, is read-only. It is a boolean attribute.

If an input or textarea field is a read-only field, it means that the user cannot change or modify the control, however, the user can highlight it and copy the text from the field.

The readonly attribute is supported by the text, search, URL, email, password, date, month, and number <input> types and <textarea>. Element.

Syntax

Following is the syntax of the HTML readonly attribute −

<tag readonly></tag>

Example

In the following example, we are using the HTML 'readonly' attribute within an input(type =’text’) element to make the field not mutable so that the user can not edit it.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML readonly attribute</title>
</head>
<body>
   <!--HTML readonly attribute-->
   <p>Example of the HTML 'readonly' attribute</p>
   <form>
      <label>Name</label>
      <input type="text" value="ABC" readonly>
   </form>
</body>
</html>

When we run the above code, it will generate an output consiting of the input field displayed on the webpage.

Example

Considering the another scenario, where we are going to use the readonly attribute with the textarea element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML readonly attribute</title>
</head>
<body>
   <!--HTML readonly attribute-->
   <p>Example of the HTML 'readonly' attribute</p>
   <form>
      <label>Feedback</label>
      <br>
      <textarea cols="40" rows="10" readonly></textarea>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the textarea field on the webpage.

Example

Let's look at the following example, where we are going to use the input type=number along with the readonly attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML readonly attribute</title>
</head>
<body>
   <!--HTML readonly attribute-->
   <p>Example of the HTML 'readonly' attribute</p>
   <form>
      <label>Mobile: </label>
      <input type="number" value="1234567890" readonly>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field filled with numbers displayed on the webpage.

Example

The following program shows the real-time usage of the HTML ‘readonly’ attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML readonly attribute</title>
</head>
<body>
   <!--HTML readonly attribute-->
   <p>Example of the HTML 'readonly' attribute</p>
   <form>
      <p>Company placement form: </p>
      <label>Name</label>
      <input type="text">
      <br>
      <label>Email</label>
      <input type="email">
      <br>
      <label>Mobile</label>
      <input type="number">
      <br>
      <label>Company name</label>
      <input type="text" value="Tutorialspoint" readonly> (readonly field) <br>
      <label>Designation</label>
      <input type="text" value="Technical Engineer" readonly> (readonly field) <br>
      <label>Date of joining</label>
      <input type="date" value="2023-08-01" readonly> (readonly field) <br>
      <button>Submit</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input field of different sections filled with data displayed on the webpage.

Example

Following is the example, where we are using the HTML 'readonly' property (attribute) with JavaScript to set/remove the 'readonly' property from the input field, and we use a separate JavaScript function for set and remove the property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML readonly attribute</title>
</head>
<body>
   <!--HTML readonly attribute-->
   <p>Example of the HTML 'readonly' attribute</p> Name: <input type="text" placeholder="Your name" id='demo'>
   <p>Click on the below buttons to set/remove readOnly property(attribute) from above input fields</p>
   <button onclick="Add()">Set readonly</button>
   <button onclick="Remove()">Remove readonly</button>
   <script>
      function Add() {
         document.getElementById('demo').readOnly = true;
         alert("Readonly set successfully");
      }

      function Remove() {
         document.getElementById('demo').readOnly = false;
         lert("Readonly removed successfully")
      }
   </script>
</body>
</html>

When we execute the above script, it will generate an output consisting of the input field along with a buttons displayed on the webpage. when the user clicks the button the event gets triggered and displays an alert.

html_attributes_reference.htm
Advertisements