Open In App

HTML readonly Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML readonly attribute, when applied to input fields or text areas, prevents users from editing the content, allowing only for viewing purposes.

Syntax

<input readonly>

Supported Tags

This attribute is used with two elements which are listed below:

Element Description
<input> Used with the readonly attribute for read-only input fields.
<textarea> Utilized with the readonly attribute for read-only text areas.

HTML readonly Attribute Examples

Example1: In this example we demonstrates the use of the readonly attribute in an input element, making the “Country” input field read-only, while allowing editing for the “Email” field.

html




<!DOCTYPE html>
<html>
    <head>
        <title>readonly attribute</title>
    </head>
 
    <body>
        <h1>GeeksForGeeks</h1>
        <h2>
            readonly attribute in Input Element
        </h2>
        <form action="">
            Email:
            <input type="text"
                   name="email" />
            <br />
            Country:
            <input
                type="text"
                name="country"
                value="Noida"
                readonly
            />
            <br />
            <input type="submit"
                   value="Submit" />
        </form>
    </body>
</html>


Output:

readonly

HTML readonly Attribute example output

Example2: In this example we are using the readonly attribute in a <textarea>, preventing user editing and allowing viewing of pre-filled content about GeeksForGeeks.

html




<!DOCTYPE html>
<html>
    <head>
        <title>readonly attribute</title>
    </head>
 
    <body>
        <h1>GeeksForGeeks</h1>
        <h2>
            readonly attribute in input Element
        </h2>
        <textarea rows="4" cols="40" readonly>
        GeeksForGeeks is a good website for
        learning computer science. It is a
        computer science portal for geeks.
    </textarea
        >
    </body>
</html>


Output: 

readonly2

HTML readonly Attribute example output

Supported Browsers:

The browsers supported by readonly attribute are listed below:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads