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 input fields based on previously entered values. When set to on, the browser displays suggestions from user's history, while off disables this functionality entirely.
Syntax
Following is the basic syntax for the autocomplete attribute −
<input autocomplete="on|off">
The autocomplete attribute can also accept specific values for better control −
<input autocomplete="name|email|username|current-password|new-password">
Attribute Values
The autocomplete attribute accepts the following values −
on − Enables autocomplete functionality. The browser will suggest values based on user's previous entries.
off − Disables autocomplete functionality completely.
Specific tokens − Values like
name,email,username,current-passwordhelp browsers provide more accurate suggestions.
Basic Autocomplete Example
Following example demonstrates the basic usage of the autocomplete attribute −
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Player Information</h2>
<form action="" method="get">
<label for="player">Player Name:</label>
<input type="text" id="player" name="player" autocomplete="on"><br><br>
<label for="rank">Rank:</label>
<input type="number" id="rank" name="rank" autocomplete="off"><br><br>
<label for="points">Points:</label>
<input type="number" id="points" name="points" autocomplete="off"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
In this example, the Player Name field has autocomplete enabled, while Rank and Points fields have it disabled. When you start typing in the Player Name field after submitting the form once, the browser will suggest previously entered names.
Autocomplete with Specific Values
Using specific autocomplete values provides better user experience by giving the browser hints about the expected data type −
<!DOCTYPE html>
<html>
<head>
<title>Specific Autocomplete Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form action="" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" autocomplete="given-name"><br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" autocomplete="family-name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email"><br><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username" autocomplete="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" autocomplete="new-password"><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
These specific values help browsers and password managers provide more accurate suggestions and better security handling for sensitive fields like passwords.
Form-level Autocomplete Control
The autocomplete attribute can also be applied to the entire form, affecting all input elements within it −
<!DOCTYPE html>
<html>
<head>
<title>Form-level Autocomplete</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Secure Form (Autocomplete Disabled)</h2>
<form action="" method="post" autocomplete="off">
<label for="cardnum">Credit Card Number:</label>
<input type="text" id="cardnum" name="cardnum"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
<label for="expiry">Expiry Date:</label>
<input type="month" id="expiry" name="expiry"><br><br>
<button type="submit">Process Payment</button>
</form>
</body>
</html>
In this payment form, autocomplete is disabled at the form level for security reasons. This prevents the browser from storing or suggesting sensitive financial information.
Common Autocomplete Values
Following table shows the commonly used autocomplete values −
| Value | Purpose | Example Usage |
|---|---|---|
| name | Full name | <input autocomplete="name"> |
| given-name | First name | <input autocomplete="given-name"> |
| family-name | Last name | <input autocomplete="family-name"> |
| Email address | <input autocomplete="email"> | |
| username | Username | <input autocomplete="username"> |
| current-password | Existing password | <input autocomplete="current-password"> |
| new-password | New password | <input autocomplete="new-password"> |
| tel | Phone number | <input autocomplete="tel"> |
Browser Compatibility
The autocomplete attribute is widely supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The basic on/off values have been supported since early browser versions, while specific autocomplete values have broader support in newer browser versions.
Security Considerations
While autocomplete improves user experience, it should be used carefully with sensitive data. Always set autocomplete="off" for fields containing passwords, credit card numbers, social security numbers, and other sensitive information to prevent browsers from storing this data locally.
Conclusion
The autocomplete attribute provides control over browser auto-completion behavior, enhancing user experience for regular forms while maintaining security for sensitive data. Use on for general information fields and off for sensitive data, or leverage specific autocomplete values for better browser integration.
328 Views
