HTML | readonly Attribute
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>
- Program:
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
- Syntax:
<textarea readonly>
- Example:
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 Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 1
Please Login to comment...