How to help password managers autocomplete input fields

These days password managers are everywhere, either from your own or one provided by the browser. To let them do their job, each input field must have an autocomplete attribute and be set them appropriately. Here's what I do as of 2023.

For register (sign up)

<h2>Register</h2>
<form id="form_register">
    <fieldset>
        <label for="register_name">Your name</label>
        <input
            id="register_name"
            autocomplete="name"
            required
        />

        <label for="register_email">Your email</label>
        <input
            id="register_email"
            type="email"
            autocomplete="username"
            required
        />

        <label for="register_password">Your password</label>
        <input
            id="register_password"
            type="password"
            autocomplete="new-password"
            required
        />
    </fieldset>

    <button>Register Account</button>
</form>

Two points here,

• Set the autocomplete attribute of email to username. Check your password manager's username field; the value is highly likely your email
• Set the autocomplete attribute of password to new-password

For login (sign in)

<h2>Log In</h2>

<form id="formLogin">
    <fieldset>
        <label for="register_name">Your email</label>
        <input
            id="login_email"
            autocomplete="username"
            required
        />

        <label for="login_password">Password</label>
        <input
            id="login_password"
            type="password"
            autocomplete="current-password"
        />
    </fieldset>
    <button>Continue</button>

    <p>
        <a href="/register" class="navlink"
            >Register a new account instead</a
        >
    </p>
</form>

The point for login form is,

• Set the autocomplete attribute of password to current-password

By following the example above, your password manager should be able to associate the input fields and the values it has.