It is a Boolean attribute which 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 an 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.
Syntax:
<input 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 > < 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:
<textarea>: It is used to hold the readonly attribute.
Syntax:
<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 > |
Output:
Supported Browsers: The browser supported by readonly attribute are listed below:
- Apple Safari 1+
- Google Chrome 1+
- Firefox 1+
- Opera 1+
- Internet Explorer 6+
leave a comment
0 Comments