- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML input readonly Attribute
The HTML input readonly attribute is used to declare an input element unmodifiable, though it still may be copied.
Let us see an example of Input readOnly property −
Example
<!DOCTYPE html> <html> <head> <title>Input Email readOnly</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>Email-readOnly</legend> <label for="EmailSelect">Contact Us : <input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly> </label> <input type="button" onclick="showMessage()" value="Copy Email Id"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var inputEmail = document.getElementById("EmailSelect"); divDisplay.textContent = 'Above email is read-only'; function showMessage() { inputEmail.select(); document.execCommand('copy'); divDisplay.textContent = 'Email Copied: '+inputEmail.value; } function showErrorMsg(){ divDisplay.textContent +=', This cannot be edited.' } </script> </body> </html>
This will produce the following output −
1) Before clicking ‘Copy Email Id’ button −
2) Clicking ‘Contact Us’ email field −
3) Clicking ‘Copy Email Id’ −
Advertisements