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
How to disable autocomplete of an HTML input field?
The autocomplete attribute in HTML controls whether the browser should automatically fill in form field values based on previously entered data. Setting autocomplete="off" disables this feature for enhanced privacy and security, particularly useful for sensitive fields like passwords or personal information.
Syntax
Following is the syntax for disabling autocomplete on an input field −
<input type="text" name="fieldName" autocomplete="off">
To enable autocomplete explicitly −
<input type="text" name="fieldName" autocomplete="on">
You can also disable autocomplete for an entire form −
<form autocomplete="off"> <!-- All inputs inherit autocomplete="off" --> </form>
Disabling Autocomplete for Individual Fields
The most common approach is to disable autocomplete on specific input fields by adding the autocomplete="off" attribute. This is particularly useful for sensitive data fields.
Example
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Control Example</title>
<style>
input {
font-size: 16px;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group {
margin: 10px 0;
}
label {
display: inline-block;
width: 120px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Autocomplete Control Example</h1>
<form>
<div class="form-group">
<label for="firstName">First name:</label>
<input type="text" id="firstName" name="firstName" autocomplete="off">
<span style="color: red;">(autocomplete OFF)</span>
</div>
<div class="form-group">
<label for="lastName">Last name:</label>
<input type="text" id="lastName" name="lastName" autocomplete="on">
<span style="color: green;">(autocomplete ON)</span>
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
<p style="background: #f0f0f0; padding: 10px; border-radius: 4px;">
<strong>Instructions:</strong> Fill in both fields and submit. Then refresh the page and start typing again to see the difference in autocomplete behavior.
</p>
</body>
</html>
The first name field will not show autocomplete suggestions, while the last name field will display previously entered values −
Autocomplete Control Example
First name: [_____________] (autocomplete OFF)
Last name: [_____________] (autocomplete ON)
[Submit]
Instructions: Fill in both fields and submit. Then refresh the page and start typing again to see the difference in autocomplete behavior.
Disabling Autocomplete for Entire Forms
When you want to disable autocomplete for all fields in a form, you can add the autocomplete="off" attribute to the <form> element. Individual fields can still override this setting.
Example
<!DOCTYPE html>
<html>
<head>
<title>Form-level Autocomplete Control</title>
<style>
.form-container {
max-width: 400px;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form (No Autocomplete)</h2>
<div class="form-container">
<form autocomplete="off">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
<input type="submit" value="Register">
</form>
</div>
<p style="margin-top: 20px; padding: 10px; background: #fff3cd; border-radius: 4px;">
<strong>Note:</strong> All fields in this form have autocomplete disabled due to the form-level setting.
</p>
</body>
</html>
All form fields inherit the autocomplete="off" setting from the parent form element −
Registration Form (No Autocomplete) ??????????????????????????????????????? ? Username: ? ? [___________________________] ? ? ? ? Email: ? ? [___________________________] ? ? ? ? Phone: ? ? [___________________________] ? ? ? ? [Register] ? ??????????????????????????????????????? Note: All fields in this form have autocomplete disabled due to the form-level setting.
Specific Autocomplete Values
HTML5 provides specific autocomplete values for different types of data. You can use these to either enable specific autocomplete behavior or disable it entirely.
Example − Using Specific Autocomplete Values
<!DOCTYPE html>
<html>
<head>
<title>Specific Autocomplete Values</title>
<style>
.form-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Autocomplete with Specific Values</h2>
<form>
<div class="form-section">
<h3>Personal Information</h3>
<label>Name:</label>
<input type="text" name="fullname" autocomplete="name"><br>
<label>Email:</label>
<input type="email" name="email" autocomplete="email"><br>
<label>Phone:</label>
<input type="tel" name="phone" autocomplete="tel"><br>
</div>
<div class="form-section">
<h3>Sensitive Information (No Autocomplete)</h3>
<label>Password:</label>
<input type="password" name="password" autocomplete="off"><br>
<label>SSN:</label>
<input type="text" name="ssn" autocomplete="off"><br>
</div>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
The form demonstrates both specific autocomplete values (like name, email, tel) for standard fields and disabled autocomplete for sensitive data −
Autocomplete with Specific Values Personal Information Name: [________________] (will suggest names) Email: [________________] (will suggest emails) Phone: [________________] (will suggest phone numbers) Sensitive Information (No Autocomplete) Password: [________________] (no suggestions) SSN: [________________] (no suggestions) [Submit Form]
Common Autocomplete Values
Following are some commonly used autocomplete values for different types of form fields −
| Autocomplete Value | Usage | Example |
|---|---|---|
off |
Disable autocomplete entirely | autocomplete="off" |
on |
Enable autocomplete (default) | autocomplete="on" |
name |
Full name | autocomplete="name" |
email |
Email address | autocomplete="email" |
username |
Username or login | autocomplete="username" |
current-password |
Current password | autocomplete="current-password" |
new-password |
New password (registration) | autocomplete="new-password" |
tel |
Telephone number | autocomplete="tel" |
Browser Compatibility and Notes
The autocomplete attribute is supported by all modern browsers. However, some browsers may still show suggestions even when autocomplete="off" is set, particularly for login forms. This is due to built-in password managers and security features.
For additional security in sensitive forms, developers sometimes use techniques like dynamically generated field names or temporary disabling of the autocomplete attribute via JavaScript.
Conclusion
Use autocomplete="off" on individual input fields or entire forms to disable browser autocomplete. This is particularly important for sensitive data fields like passwords, social security numbers, or credit card information. For standard fields, specific autocomplete values like name or email can improve user experience by providing relevant suggestions.
477 Views
