Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Email readOnly Property
The HTML DOM Input Email readOnly property sets or returns whether an email input field can be modified by the user. When set to true, the field becomes read-only and users cannot edit its content, though they can still select and copy the text.
Syntax
Following is the syntax for returning the readOnly property −
inputEmailObject.readOnly
Following is the syntax for setting the readOnly property −
inputEmailObject.readOnly = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
true |
Sets the email input field as read-only. Users cannot modify the content. |
false |
Sets the email input field as editable. Users can modify the content (default behavior). |
Return Value
The property returns a Boolean value −
trueif the email input field is read-onlyfalseif the email input field is editable
Example − Getting readOnly Property
Following example demonstrates how to check if an email input field is read-only −
<!DOCTYPE html>
<html>
<head>
<title>Input Email readOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Email Field Status</h2>
<label for="email1">Email (Read-only):</label>
<input type="email" id="email1" value="support@example.com" readonly>
<br><br>
<label for="email2">Email (Editable):</label>
<input type="email" id="email2" value="user@example.com">
<br><br>
<button onclick="checkStatus()">Check Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var email1 = document.getElementById("email1");
var email2 = document.getElementById("email2");
var status1 = email1.readOnly ? "Read-only" : "Editable";
var status2 = email2.readOnly ? "Read-only" : "Editable";
document.getElementById("result").innerHTML =
"Email 1 status: " + status1 + "<br>" +
"Email 2 status: " + status2;
}
</script>
</body>
</html>
The output shows the current read-only status of both email fields −
Check Email Field Status Email (Read-only): support@example.com Email (Editable): user@example.com [Check Status] After clicking button: Email 1 status: Read-only Email 2 status: Editable
Example − Setting readOnly Property
Following example shows how to dynamically toggle the readOnly property of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Email ReadOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Email Field</h2>
<label for="userEmail">Your Email:</label>
<input type="email" id="userEmail" value="john@example.com" style="padding: 5px; margin: 10px;">
<br>
<button onclick="toggleReadOnly()">Toggle Read-Only</button>
<button onclick="showValue()">Show Value</button>
<p id="status">Field is currently: Editable</p>
<script>
var emailField = document.getElementById("userEmail");
var statusElement = document.getElementById("status");
function toggleReadOnly() {
emailField.readOnly = !emailField.readOnly;
var currentStatus = emailField.readOnly ? "Read-only" : "Editable";
statusElement.textContent = "Field is currently: " + currentStatus;
// Visual feedback
emailField.style.backgroundColor = emailField.readOnly ? "#f5f5f5" : "white";
}
function showValue() {
alert("Email value: " + emailField.value);
}
</script>
</body>
</html>
The example allows toggling between read-only and editable states. The background color changes to provide visual feedback −
Toggle Email Field Your Email: john@example.com [Toggle Read-Only] [Show Value] Field is currently: Editable (After clicking Toggle: background becomes gray, field becomes read-only)
Example − Practical Use Case
Following example demonstrates a practical scenario where email fields are made read-only after form submission −
<!DOCTYPE html>
<html>
<head>
<title>Email Form with ReadOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form id="contactForm">
<label for="contactEmail">Contact Email:</label><br>
<input type="email" id="contactEmail" placeholder="Enter your email"
style="width: 300px; padding: 8px; margin: 5px 0;"><br><br>
<label for="supportEmail">Support Email (Read-only):</label><br>
<input type="email" id="supportEmail" value="support@company.com" readonly
style="width: 300px; padding: 8px; margin: 5px 0; background: #f0f0f0;"><br><br>
<button type="button" onclick="submitForm()">Submit</button>
<button type="button" onclick="editForm()">Edit</button>
</form>
<p id="message"></p>
<script>
function submitForm() {
var contactEmail = document.getElementById("contactEmail");
var message = document.getElementById("message");
if (contactEmail.value) {
contactEmail.readOnly = true;
contactEmail.style.backgroundColor = "#f0f0f0";
message.innerHTML = "Form submitted! Email field is now read-only.";
} else {
message.innerHTML = "Please enter your email address.";
}
}
function editForm() {
var contactEmail = document.getElementById("contactEmail");
var message = document.getElementById("message");
contactEmail.readOnly = false;
contactEmail.style.backgroundColor = "white";
message.innerHTML = "You can now edit the email field.";
}
</script>
</body>
</html>
This example shows a contact form where the user's email becomes read-only after submission, preventing accidental changes. The support email is always read-only −
Contact Form Contact Email: [Enter your email] Support Email (Read-only): support@company.com [Submit] [Edit] (After entering email and clicking Submit: contact field becomes read-only with gray background)
Key Points
Read-only email fields can still be selected and copied, but not modified
The
readOnlyproperty is case-sensitive (capital 'O')Read-only fields are still included in form submissions
JavaScript can dynamically change the readOnly property at runtime
Visual styling often changes when a field becomes read-only
Conclusion
The HTML DOM Input Email readOnly property provides control over whether users can modify email input fields. It returns a boolean value indicating the current state and accepts true or false to set the read-only status. This property is useful for creating forms with protected email addresses or implementing dynamic form behaviors.
162 Views
