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 disabled Property
The HTML DOM Input Email disabled property sets or returns whether an Input Email field is enabled or disabled. When set to true, the email input becomes non-interactive and its value cannot be modified by the user.
Syntax
Following is the syntax for returning the disabled property value −
inputEmailObject.disabled
Following is the syntax for setting the disabled property −
inputEmailObject.disabled = booleanValue
Property Values
The disabled property accepts the following boolean values −
| Value | Description |
|---|---|
true |
The input email field is disabled and cannot be interacted with. |
false |
The input email field is enabled and can be interacted with (default value). |
Return Value
The property returns a Boolean value indicating whether the email input field is disabled (true) or enabled (false).
Example − Disabling Email Input on Form Submission
Following example demonstrates how to disable an email input field after form submission −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Submission Form</h2>
<form>
<label for="employeeEmail">Employee Email:</label>
<input type="email" id="employeeEmail" value="john@company.com" style="margin: 10px; padding: 5px;">
<br>
<button type="button" onclick="submitEmail()" style="margin: 10px; padding: 8px 15px;">Submit Email</button>
<div id="result" style="margin: 10px; font-weight: bold;"></div>
</form>
<script>
function submitEmail() {
var emailInput = document.getElementById("employeeEmail");
var result = document.getElementById("result");
// Disable the email input
emailInput.disabled = true;
// Display confirmation message
result.innerHTML = "Email '" + emailInput.value + "' has been submitted successfully!";
result.style.color = "green";
}
</script>
</body>
</html>
The output shows the email field becoming disabled after clicking the submit button −
Before clicking: Email field is editable and button shows "Submit Email" After clicking: Email field is grayed out/disabled and shows "Email 'john@company.com' has been submitted successfully!"
Example − Toggling Email Field State
Following example shows how to toggle the disabled state of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Email Field State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Email Field</h2>
<label for="userEmail">User Email:</label>
<input type="email" id="userEmail" value="user@example.com" style="margin: 10px; padding: 5px;">
<br>
<button type="button" onclick="toggleEmailState()" style="margin: 10px; padding: 8px 15px;">Toggle State</button>
<button type="button" onclick="checkState()" style="margin: 10px; padding: 8px 15px;">Check State</button>
<div id="status" style="margin: 10px; font-weight: bold;"></div>
<script>
function toggleEmailState() {
var emailInput = document.getElementById("userEmail");
var status = document.getElementById("status");
// Toggle the disabled state
emailInput.disabled = !emailInput.disabled;
// Update status message
if (emailInput.disabled) {
status.innerHTML = "Email field is now DISABLED";
status.style.color = "red";
} else {
status.innerHTML = "Email field is now ENABLED";
status.style.color = "green";
}
}
function checkState() {
var emailInput = document.getElementById("userEmail");
var status = document.getElementById("status");
// Check and display current state
if (emailInput.disabled) {
status.innerHTML = "Current state: DISABLED";
status.style.color = "orange";
} else {
status.innerHTML = "Current state: ENABLED";
status.style.color = "blue";
}
}
</script>
</body>
</html>
This example allows you to toggle between enabled and disabled states and check the current state −
Initial state: Email field is enabled After toggle: Email field becomes disabled and grayed out Check state: Shows "Current state: DISABLED" or "Current state: ENABLED"
Example − Conditional Email Field Enabling
Following example demonstrates enabling an email field based on a checkbox condition −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Email Field</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Newsletter Subscription</h2>
<label>
<input type="checkbox" id="subscribeCheck" onchange="toggleEmailField()" style="margin: 5px;">
Subscribe to newsletter
</label>
<br>
<label for="newsletterEmail">Email Address:</label>
<input type="email" id="newsletterEmail" disabled placeholder="Enter your email" style="margin: 10px; padding: 5px;">
<div id="message" style="margin: 10px; font-style: italic;">Check the box above to enable email input</div>
<script>
function toggleEmailField() {
var checkbox = document.getElementById("subscribeCheck");
var emailInput = document.getElementById("newsletterEmail");
var message = document.getElementById("message");
// Enable/disable email field based on checkbox
emailInput.disabled = !checkbox.checked;
if (checkbox.checked) {
message.innerHTML = "Email field is now enabled. Enter your email address.";
message.style.color = "green";
emailInput.focus();
} else {
message.innerHTML = "Check the box above to enable email input";
message.style.color = "gray";
emailInput.value = "";
}
}
</script>
</body>
</html>
The email field is initially disabled and becomes enabled only when the checkbox is checked −
Unchecked: Email field is disabled and grayed out Checked: Email field becomes enabled and focusable
Conclusion
The HTML DOM Input Email disabled property provides control over the interactive state of email input fields. Setting it to true disables user interaction, while false enables it. This property is commonly used in form validation, conditional field enabling, and preventing modifications after submission.
185 Views
