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>w3wiki</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:

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

html

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

Output:

HTML readonly Attribute example output

Supported Browsers:

The browsers supported by readonly attribute are listed below: