What is Autocomplete?
The autocomplete attribute tells the browser "this field should be auto-filled with saved user data."
Complete autocomplete example:
1<form autocomplete="on">
2 <!-- Personal information -->
3 <label>Full Name:</label>
4 <input type="text" name="name" autocomplete="name">
5
6 <label>Email:</label>
7 <input type="email" name="email" autocomplete="email">
8
9 <label>Phone:</label>
10 <input type="tel" name="phone" autocomplete="tel">
11
12 <!-- Address information -->
13 <label>Street Address:</label>
14 <input type="text" name="address" autocomplete="street-address">
15
16 <label>City:</label>
17 <input type="text" name="city" autocomplete="address-level2">
18
19 <label>Postal Code:</label>
20 <input type="text" name="postal" autocomplete="postal-code">
21
22 <label>Country:</label>
23 <select name="country" autocomplete="country-name">
24 <option>India</option>
25 <option>USA</option>
26 </select>
27
28 <!-- Login information -->
29 <label>Username:</label>
30 <input type="text" name="username" autocomplete="username">
31
32 <label>Password:</label>
33 <input type="password" name="password" autocomplete="current-password">
34
35 <!-- New password (browser won't autofill old password) -->
36 <label>New Password:</label>
37 <input type="password" name="new-password" autocomplete="new-password">
38
39 <!-- Credit card (use carefully, requires HTTPS) -->
40 <label>Card Number:</label>
41 <input type="text" name="cc-number" autocomplete="cc-number">
42
43 <label>Expiry Date:</label>
44 <input type="text" name="cc-exp" autocomplete="cc-exp">
45</form>Common autocomplete values:
Value | What it fills |
|---|---|
| Full name |
| First name |
| Last name |
| Email address |
| Phone number |
| Address line |
| Zip/Pin code |
| Country |
| Username |
| Existing password |
| New password (won't autofill) |
| Turn off autocomplete |
When to use
For security-sensitive fields (OTP, one-time passwords)
When you don't want browser suggestions
For custom autocomplete systems
