- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - readonly Attribute
The HTML readonly attribute is used to specify that an input, or textarea field, is read-only. It is a boolean attribute.
If an input or textarea field is a read-only field, it means that the user cannot change or modify the control, however, the user can highlight it and copy the text from the field.
The readonly attribute is supported by the text, search, URL, email, password, date, month, and number <input> types and <textarea>. Element.
Syntax
Following is the syntax of the HTML readonly attribute −
<tag readonly></tag>
Example
In the following example, we are using the HTML 'readonly' attribute within an input(type =’text’) element to make the field not mutable so that the user can not edit it.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML readonly attribute</title> </head> <body> <!--HTML readonly attribute--> <p>Example of the HTML 'readonly' attribute</p> <form> <label>Name</label> <input type="text" value="ABC" readonly> </form> </body> </html>
When we run the above code, it will generate an output consiting of the input field displayed on the webpage.
Example
Considering the another scenario, where we are going to use the readonly attribute with the textarea element.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML readonly attribute</title> </head> <body> <!--HTML readonly attribute--> <p>Example of the HTML 'readonly' attribute</p> <form> <label>Feedback</label> <br> <textarea cols="40" rows="10" readonly></textarea> </form> </body> </html>
On running the above code, the output window will pop up displaying the textarea field on the webpage.
Example
Let's look at the following example, where we are going to use the input type=number along with the readonly attribute.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML readonly attribute</title> </head> <body> <!--HTML readonly attribute--> <p>Example of the HTML 'readonly' attribute</p> <form> <label>Mobile: </label> <input type="number" value="1234567890" readonly> </form> </body> </html>
When we run the above code, it will generate an output consisting of the input field filled with numbers displayed on the webpage.
Example
The following program shows the real-time usage of the HTML ‘readonly’ attribute.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML readonly attribute</title> </head> <body> <!--HTML readonly attribute--> <p>Example of the HTML 'readonly' attribute</p> <form> <p>Company placement form: </p> <label>Name</label> <input type="text"> <br> <label>Email</label> <input type="email"> <br> <label>Mobile</label> <input type="number"> <br> <label>Company name</label> <input type="text" value="Tutorialspoint" readonly> (readonly field) <br> <label>Designation</label> <input type="text" value="Technical Engineer" readonly> (readonly field) <br> <label>Date of joining</label> <input type="date" value="2023-08-01" readonly> (readonly field) <br> <button>Submit</button> </form> </body> </html>
On running the above code, the output window will pop up displaying the input field of different sections filled with data displayed on the webpage.
Example
Following is the example, where we are using the HTML 'readonly' property (attribute) with JavaScript to set/remove the 'readonly' property from the input field, and we use a separate JavaScript function for set and remove the property.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML readonly attribute</title> </head> <body> <!--HTML readonly attribute--> <p>Example of the HTML 'readonly' attribute</p> Name: <input type="text" placeholder="Your name" id='demo'> <p>Click on the below buttons to set/remove readOnly property(attribute) from above input fields</p> <button onclick="Add()">Set readonly</button> <button onclick="Remove()">Remove readonly</button> <script> function Add() { document.getElementById('demo').readOnly = true; alert("Readonly set successfully"); } function Remove() { document.getElementById('demo').readOnly = false; lert("Readonly removed successfully") } </script> </body> </html>
When we execute the above script, it will generate an output consisting of the input field along with a buttons displayed on the webpage. when the user clicks the button the event gets triggered and displays an alert.
To Continue Learning Please Login
Login with Google