HTML | readonly Attribute - GeeksforGeeks

25 Mar, 2020
It is a Boolean attribute that is used to specify that the text written in input or text area Element is read-only. It means that a user can not modify or changes a content already present in a particular Element (However, a user can tab to it, highlight it, and copy the text from it). Whereas a JavaScript can be used to change the read-only value and make the input field editable.
Elements: This attribute is used with two elements which are listed below:
<input>: It is used to readonly attribute to read the content only.
<text-area> It is used to hold the readonly attribute.
Example: 1
Syntax:<input readonly>
<input readonly>
Program:<!DOCTYPE html><html>  <head>    <title>readonly attribute</title>    <style>        body {            text-align: center        }                  h1,        h2 {            color: green;            font-style: italic;        }    </style></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>
<!DOCTYPE html><html>  <head>    <title>readonly attribute</title>    <style>        body {            text-align: center        }                  h1,        h2 {            color: green;            font-style: italic;        }    </style></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:Example:2
Example:2
Syntax:<textarea readonly>
<textarea readonly>
Example:<!DOCTYPE html><html>  <head>    <title>readonly attribute</title>    <style>        body {            text-align: center;        }                  h1,        h2 {            color: green;            font-style: italic;        }    </style></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>
<!DOCTYPE html><html>  <head>    <title>readonly attribute</title>    <style>        body {            text-align: center;        }                  h1,        h2 {            color: green;            font-style: italic;        }    </style></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:Supported Browsers: The browsers supported by readonly attribute are listed below:Google ChromeInternet ExplorerFirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
Supported Browsers: The browsers supported by readonly attribute are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Attributes
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property