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 autocomplete Property
The HTML DOM Input Email autocomplete property sets or returns whether autocomplete is enabled or disabled for an email input field. When enabled, the browser displays previously typed email values as suggestions to help users fill the field more quickly.
Syntax
Following is the syntax to return the current autocomplete setting −
inputEmailObject.autocomplete
Following is the syntax to set the autocomplete property −
inputEmailObject.autocomplete = value
Property Values
The autocomplete property accepts the following string values −
| Value | Description |
|---|---|
| on | Enables autocomplete functionality. The browser shows previously entered email values as suggestions. This is the default value. |
| off | Disables autocomplete functionality. The browser will not show any previously entered email suggestions. |
Return Value
This property returns a string indicating the current autocomplete setting: either "on" or "off".
Example − Getting Autocomplete Status
Following example demonstrates how to retrieve the current autocomplete setting of an email input −
<!DOCTYPE html>
<html>
<head>
<title>Get Email Autocomplete Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Autocomplete Status</h2>
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail" placeholder="Enter your email" autocomplete="on">
<button onclick="checkStatus()">Check Autocomplete Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var emailInput = document.getElementById("userEmail");
var status = emailInput.autocomplete;
document.getElementById("result").textContent = "Autocomplete is: " + status;
}
</script>
</body>
</html>
The output displays the current autocomplete status when the button is clicked −
Autocomplete is: on
Example − Toggling Autocomplete Setting
Following example shows how to dynamically change the autocomplete property −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Email Autocomplete</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Autocomplete Control</h2>
<label for="emailField">Email Address:</label>
<input type="email" id="emailField" placeholder="user@example.com" autocomplete="off">
<div style="margin-top: 10px;">
<button onclick="enableAutocomplete()">Enable Autocomplete</button>
<button onclick="disableAutocomplete()">Disable Autocomplete</button>
</div>
<p id="status">Current Status: off</p>
<script>
var emailInput = document.getElementById("emailField");
var statusDisplay = document.getElementById("status");
function enableAutocomplete() {
emailInput.autocomplete = "on";
statusDisplay.textContent = "Current Status: " + emailInput.autocomplete;
}
function disableAutocomplete() {
emailInput.autocomplete = "off";
statusDisplay.textContent = "Current Status: " + emailInput.autocomplete;
}
</script>
</body>
</html>
The buttons allow you to toggle the autocomplete setting, and the status display updates accordingly −
Current Status: on (after clicking "Enable Autocomplete") Current Status: off (after clicking "Disable Autocomplete")
Example − Form with Multiple Email Fields
Following example demonstrates managing autocomplete for multiple email inputs in a form −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Email Autocomplete</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form>
<div style="margin-bottom: 15px;">
<label for="primaryEmail">Primary Email:</label>
<input type="email" id="primaryEmail" autocomplete="on">
</div>
<div style="margin-bottom: 15px;">
<label for="secondaryEmail">Secondary Email:</label>
<input type="email" id="secondaryEmail" autocomplete="off">
</div>
<button type="button" onclick="showSettings()">Show Autocomplete Settings</button>
</form>
<div id="settings" style="margin-top: 20px;"></div>
<script>
function showSettings() {
var primary = document.getElementById("primaryEmail").autocomplete;
var secondary = document.getElementById("secondaryEmail").autocomplete;
document.getElementById("settings").innerHTML =
"<p><strong>Primary Email:</strong> " + primary + "</p>" +
"<p><strong>Secondary Email:</strong> " + secondary + "</p>";
}
</script>
</body>
</html>
This shows how different email fields can have different autocomplete settings within the same form −
Primary Email: on Secondary Email: off
Browser Behavior
When autocomplete="on" is set, modern browsers will display a dropdown list of previously entered email addresses when the user starts typing. This feature improves user experience by reducing repetitive typing. When set to "off", no suggestions are shown, which can be useful for sensitive forms or when you want to prevent data leakage between users on shared computers.
Conclusion
The Input Email autocomplete property provides programmatic control over browser autocomplete functionality for email fields. Use "on" to enable helpful email suggestions for better user experience, or "off" to disable suggestions for privacy-sensitive forms. The property can be both read and modified dynamically using JavaScript.
233 Views
