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 Form autocomplete Property
The HTML DOM Form autocomplete property is associated with the autocomplete attribute of the form element. This property allows you to set or return the autocomplete attribute value of a form, controlling whether the browser should automatically complete form fields based on previously entered values.
When autocomplete is enabled ("on"), the browser suggests values based on user's previous input. When disabled ("off"), users must manually enter all values without browser assistance. The autocomplete property can be overridden for specific input fields within the form.
Syntax
Following is the syntax for setting the autocomplete property −
formObject.autocomplete = "on" | "off"
Following is the syntax for getting the autocomplete property −
var value = formObject.autocomplete;
Parameters
The autocomplete property accepts the following values −
"on" − (Default) The browser attempts to autocomplete user input based on previously entered values.
"off" − The browser does not provide autocomplete suggestions, requiring manual input.
Return Value
The property returns a string representing the current autocomplete setting: either "on" or "off".
Example − Setting Autocomplete Property
Following example demonstrates how to change the autocomplete property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Form Autocomplete Property</title>
<style>
form {
border: 2px solid blue;
margin: 10px;
padding: 15px;
border-radius: 5px;
}
input {
margin: 5px;
padding: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Form Autocomplete Property Example</h1>
<form id="myForm" autocomplete="off">
<label>User Name: <input type="text" name="username"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<label>Password: <input type="password" name="password"></label>
</form>
<button onclick="enableAutocomplete()">Enable Autocomplete</button>
<button onclick="disableAutocomplete()">Disable Autocomplete</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status">Current autocomplete status: off</p>
<script>
function enableAutocomplete() {
document.getElementById("myForm").autocomplete = "on";
document.getElementById("status").innerHTML = "Autocomplete enabled. Browser will suggest previously entered values.";
}
function disableAutocomplete() {
document.getElementById("myForm").autocomplete = "off";
document.getElementById("status").innerHTML = "Autocomplete disabled. Users must enter values manually.";
}
function checkStatus() {
var form = document.getElementById("myForm");
var currentStatus = form.autocomplete;
document.getElementById("status").innerHTML = "Current autocomplete status: " + currentStatus;
}
</script>
</body>
</html>
The form initially has autocomplete disabled. Clicking the buttons demonstrates how to enable, disable, and check the autocomplete status −
Form with username, email, and password fields [Enable Autocomplete] [Disable Autocomplete] [Check Status] Current autocomplete status: off
Example − Individual Field Override
Following example shows how individual fields can override the form's autocomplete setting −
<!DOCTYPE html>
<html>
<head>
<title>Field-Level Autocomplete Override</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Field-Level Autocomplete Override</h1>
<form id="registrationForm" autocomplete="on">
<label>Full Name: <input type="text" name="fullname"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<label>Credit Card: <input type="text" name="creditcard" autocomplete="off"></label><br><br>
<label>Security Code: <input type="text" name="cvv" autocomplete="off"></label>
</form>
<button onclick="showSettings()">Show Autocomplete Settings</button>
<p id="info"></p>
<script>
function showSettings() {
var form = document.getElementById("registrationForm");
var inputs = form.querySelectorAll("input");
var info = "Form autocomplete: " + form.autocomplete + "<br>";
inputs.forEach(function(input, index) {
var fieldAutocomplete = input.autocomplete || "inherited from form";
info += input.name + " field: " + fieldAutocomplete + "<br>";
});
document.getElementById("info").innerHTML = info;
}
</script>
</body>
</html>
In this example, the form has autocomplete enabled, but sensitive fields like credit card and CVV override this setting to maintain security −
Form autocomplete: on fullname field: inherited from form email field: inherited from form creditcard field: off cvv field: off
Browser Compatibility
The autocomplete property is widely supported across modern browsers including Chrome, Firefox, Safari, and Edge. However, the actual autocomplete behavior may vary depending on browser settings and user preferences.
Key Points
The autocomplete property affects all form fields unless individually overridden.
Setting autocomplete to
"off"enhances security for sensitive data like passwords and credit card information.Individual input fields can have their own autocomplete attribute that overrides the form-level setting.
The property can be both read and modified using JavaScript during runtime.
Conclusion
The HTML DOM Form autocomplete property provides control over browser autocomplete behavior for forms. Setting it to "on" enables browser suggestions based on previous input, while "off" requires manual entry. Individual fields can override the form-level setting for enhanced security and user experience control.
206 Views
