HTML readonly Attribute - HTML Attribute

Definition and Usage

The readonly attribute is a boolean attribute.

When present, it specifies that an input field or textarea is read-only.

A read-only field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.

Applies to

The readonly attribute can be used on the following elements:

Elements	Attribute
<input>	readonly
<textarea>	readonly

Browser Support

The readonly attribute has the following browser support for each element.

How to add An HTML form with a read-only input field - HTML readonly Attribute

Input Example. The input readonly attribute.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The input readonly attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="country">Country:</label>  
  <input type="text" id="country" name="country" value="Norway" readonly><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output should be:

How to add A read-only text area - HTML readonly Attribute

Textarea Example. The textarea readonly attribute.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea readonly attribute</h1>

<textarea rows="4" cols="50" readonly>
At Horje.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

</body>
</html>

Output should be:

html readonly attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference