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 autocomplete Attribute
The autocomplete attribute in HTML controls whether the browser should automatically fill in form fields based on previously entered values. When set to on, browsers provide suggestions from the user's input history, making form completion faster and more convenient.
Syntax
Following is the syntax for the autocomplete attribute −
<form autocomplete="on|off"> <!-- form elements --> </form>
For individual form controls, the syntax is −
<input type="text" name="fieldname" autocomplete="on|off">
Parameters
The autocomplete attribute accepts the following values −
on − Enables autocomplete for the form or input element. The browser will suggest previously entered values.
off − Disables autocomplete for the form or input element. No suggestions will be displayed.
Additionally, HTML5 introduces specific autocomplete tokens like name, email, username, current-password, tel, and address-line1 that help browsers provide more accurate suggestions.
Form-Level Autocomplete
When applied to the <form> element, the autocomplete attribute affects all form controls within that form, unless individually overridden.
Example − Autocomplete Enabled
<!DOCTYPE html>
<html>
<head>
<title>Form Autocomplete On</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Player Registration Form</h2>
<form action="/submit" method="post" autocomplete="on">
<label for="player">Player Name:</label>
<input type="text" id="player" name="player" style="margin: 5px; padding: 5px;"><br><br>
<label for="rank">Rank:</label>
<input type="number" id="rank" name="rank" style="margin: 5px; padding: 5px;"><br><br>
<label for="points">Points:</label>
<input type="number" id="points" name="points" style="margin: 5px; padding: 5px;"><br><br>
<button type="submit" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px;">Submit</button>
</form>
</body>
</html>
With autocomplete="on", browsers will show dropdown suggestions based on previously entered values when users start typing.
Example − Autocomplete Disabled
<!DOCTYPE html>
<html>
<head>
<title>Form Autocomplete Off</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Secure Login Form</h2>
<form action="/login" method="post" autocomplete="off">
<label for="username">Username:</label>
<input type="text" id="username" name="username" style="margin: 5px; padding: 5px;"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" style="margin: 5px; padding: 5px;"><br><br>
<button type="submit" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px;">Login</button>
</form>
</body>
</html>
With autocomplete="off", no autocomplete suggestions will appear, which is ideal for sensitive information like passwords or credit card numbers.
Input-Level Autocomplete
Individual form controls can override the form's autocomplete setting. This allows for fine-grained control over which fields should have autocomplete enabled or disabled.
Example − Mixed Autocomplete Settings
<!DOCTYPE html>
<html>
<head>
<title>Mixed Autocomplete Settings</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="/contact" method="post" autocomplete="on">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" autocomplete="name" style="margin: 5px; padding: 5px;"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email" style="margin: 5px; padding: 5px;"><br><br>
<label for="secret">Secret Code:</label>
<input type="text" id="secret" name="secret" autocomplete="off" style="margin: 5px; padding: 5px;"><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel" style="margin: 5px; padding: 5px;"><br><br>
<button type="submit" style="padding: 8px 16px; background-color: #17a2b8; color: white; border: none; border-radius: 4px;">Send Message</button>
</form>
</body>
</html>
In this example, most fields use specific autocomplete tokens for better suggestions, while the "Secret Code" field explicitly disables autocomplete for security.
HTML5 Autocomplete Tokens
HTML5 introduces specific autocomplete values that help browsers provide more accurate suggestions −
Example − Using Autocomplete Tokens
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Tokens</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Profile Form</h2>
<form action="/profile" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" autocomplete="given-name" style="margin: 5px; padding: 5px;"><br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" autocomplete="family-name" style="margin: 5px; padding: 5px;"><br><br>
<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email" autocomplete="email" style="margin: 5px; padding: 5px;"><br><br>
<label for="user_phone">Phone:</label>
<input type="tel" id="user_phone" name="user_phone" autocomplete="tel" style="margin: 5px; padding: 5px;"><br><br>
<button type="submit" style="padding: 8px 16px; background-color: #6f42c1; color: white; border: none; border-radius: 4px;">Save Profile</button>
</form>
</body>
</html>
Using specific tokens like given-name, family-name, email, and tel helps browsers provide more contextually relevant suggestions.
Common Use Cases
Following table shows when to use autocomplete on or off −
| Use autocomplete="on" | Use autocomplete="off" |
|---|---|
| Contact forms (name, email, phone) | Login passwords |
| Shipping addresses | Credit card numbers |
| Search boxes | Social security numbers |
| User profile information | One-time verification codes |
| Registration forms | Banking information |
Browser Compatibility
The autocomplete attribute is widely supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, browsers may ignore the autocomplete="off" directive for login forms to improve user experience, as they prioritize password managers and security features.
Conclusion
The autocomplete attribute provides control over browser auto-fill behavior, enhancing user experience for routine data entry while maintaining security for sensitive information. Use autocomplete="on" or specific tokens for user-friendly forms, and autocomplete="off" for secure, sensitive data fields.
204 Views
