TaskBuild a sign-up form: email input with autocomplete='email', given-name input with autocomplete='given-name', new password input with autocomplete='new-password'.
autocomplete: the attribute everyone forgets
75 XP6 min
Theory
autocomplete tells the browser what the field stores
<input name="email" autocomplete="email" /> <input name="given_name" autocomplete="given-name" /> <input name="family_name" autocomplete="family-name" /> <input name="address_line1" autocomplete="address-line1" /> <input name="postal_code" autocomplete="postal-code" /> <input name="card" autocomplete="cc-number" /> <input name="phone" autocomplete="tel" /> <input name="password" autocomplete="current-password" /> <input name="new_password" autocomplete="new-password" /> <input name="one_time_code" autocomplete="one-time-code" />
The browser uses this to:
- Suggest values from the user's saved profile (Chrome / Safari sync).
- Pull a one-time code from SMS automatically (iOS / Android).
- Help password managers know which field is which.
- Suggest stored credit cards securely without exposing them to your JS.
The autocomplete=off myth
autocomplete="off" does NOT prevent password managers from filling. They (correctly) ignore it for username/password fields β security tools are more important than your preference. Stop trying to disable autofill on login forms.
new-password vs current-password
autocomplete="current-password"on sign-in forms β password managers fill the stored password.autocomplete="new-password"on sign-up / change-password forms β password managers offer to generate a new strong one.
Confusing the two means the user's "create new password" field gets autofilled with their existing password. Fix it.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.