HTML - readonly Attribute

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 Elements.

Syntax

<tag readonly></tag>

Applies on

Below-listed elements allow the use of the HTML readonly attribute.

Element	Description
<input>	HTML <input> tag is used to specify the input field.
<textarea>	HTML <textarea> tag is used to represent a multiline plain-text editing control.

Examples of HTML readonly attribute

Below examples will illustrate the HTML readonly attribute, where and how we should use this attribute!

Make an input text as readonly

Output window displays name as 'tutorialspoint' which cannot be edited.

<!DOCTYPE html>
<html>

<head>
   <title>HTML readonly attribute</title>
</head>

<body>
   <h3>Example of the HTML 'readonly' attribute</h3>
   <form>
      <label>Name</label>
      <input type="text" 
             value="tutorialspoint" 
             readonly>
   </form>
</body>

</html>

Make textarea as readonly

Output window displays textarea content which cannot be altered.

<!DOCTYPE html>
<html>

<head>
   <title>HTML textarea readonly attribute</title>
</head>

<body>
   <h3>Example of the HTML textarea 'readonly' attribute</h3>
   <form>
      <label>Feedback</label>
      <br>
      <textarea cols="40" 
                rows="10" 
                readonly>
Try to improve your communication skills.
      </textarea>
   </form>
</body>

</html>

Make an input number as readonly

Output window displays a mobile number which cannot be edited.

<!DOCTYPE html>
<html>

<head>
   <title>HTML input readonly attribute</title>
</head>

<body>
   <h3>Example of the HTML input 'readonly' attribute</h3>
   <form>
      <label>Mobile: </label>
      <input type="number" 
             value="1234567890" 
             readonly>
   </form>
</body>

</html>

Realtime usage of HTML readonly attribute

Output window displays a form with different fields where some fields are readonly fields which cannot be altered.

<!DOCTYPE html>
<html>

<head>
    <title>HTML readonly attribute in forms</title>
</head>

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

</html>

Supported Browsers

Attribute
readonly	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm