Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.

Sam Dutton

If users ever need to sign in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designed sign-in forms get high bounce rates. Each bounce could mean a lost and disgruntled user—not just a missed sign-in opportunity.

Here is an example of a simple sign-in form that demonstrates all of the best practices:

Checklist

• Use meaningful HTML elements: <form>, <input>, <label>, and <button>.
• Label each input with a <label>.
• Use element attributes to access built-in browser features: type, name, autocomplete, required.
• Give input name and id attributes stable values that don't change between page loads or website deployments.
• Put sign-in in its own <form> element.
• Ensure successful form submission.
• Use autocomplete="new-password" and id="new-password" for the password input in a sign-up form, and for the new password in a reset-password form.
• Use autocomplete="current-password"