marlou knowledge base

# web - login forms good practices

# articles

# MDN doc

<form>: The Form element

HTML attribute: autocomplete

# web.dev checklist

Sign-in form best practices - web.dev

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" and id="current-password" for a sign-in password input.
  • Provide Show password functionality.
  • Use aria-label and aria-describedby for password inputs.
  • Don't double-up inputs.
  • Design forms so the mobile keyboard doesn't obscure inputs or buttons.
  • Ensure forms are usable on mobile: use legible text, and make sure inputs and buttons are large enough to work as touch targets.
  • Maintain branding and style on your sign-up and sign-in pages.
  • Test in the field as well as the lab: build page analytics, interaction analytics, and user-centric performance measurement into your sign-up and sign-in flow.
  • Test across browsers and devices: form behaviour varies significantly across platforms.

# chromium.org

# Create Amazing Password Forms

  • Group related fields in a single form
  • Use autocomplete attributes
  • Make sure form submission is clear
  • Use hidden fields for implicit information
  • Don’t try to fool the browser
  • Follow existing conventions
  • Follow HTML guidelines

# Password Form Styles that Chromium Understands

# Sign-in form
<form id="login" action="/login" method="post">
  <label for="username">Username</label>
  <input
    id="username"
    type="text"
    name="username"
    autocomplete="username"
    required
  >
  <label for="password">Password</label>
  <input
    id="password"
    type="password"
    name="password"
    autocomplete="current-password"
    required
  >

  <button type="submit">Sign In</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Email First Sign-in Flow

Collect the email:

<form id="login" action="/login" method="post">
  <label for="username">Username</label>
  <input
    id="username"
    type="email"
    name="username"
    autocomplete="username"
    required
  >
  <button type="submit">Next</button>
</form>
1
2
3
4
5
6
7
8
9
10
11

Then collect the password, but include the email as the value of a hidden form field

<style>
  #username {
    display: none;
  }
</style>
<form id="login" action="login.php" method="post">
  <!-- user invisible -->
  <input id="username" type="email" value="user@example.com">

  <label for="password">Password</label>
  <input
    id="password"
    type="password"
    name="password"
    autocomplete="current-password"
    required
  >
  <button type="submit">Sign In</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Sign-up Form
<form id="signup" action="/signup" method="post">
  <label for="username">Username</label>
  <input
    id="username"
    type="text"
    name="username"
    autocomplete="username"
    required
  >
  <label for="password">New password</label>
  <input
    id="password"
    type="password"
    name="password"
    autocomplete="new-password"
    required
  >
  <button type="submit">Sign In</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Or

<form id="signup" action="/signup" method="post">
  <label for="username">Username</label>
  <input
    id="username"
    type="text"
    name="username"
    autocomplete="username"
    required
  >
  <label for="password">New password</label>
  <input
    id="password"
    type="password"
    name="password"
    autocomplete="new-password"
    required
  >
  <label for="password">Confirm new password</label>
  <input
    id="password"
    type="password"
    name="password"
    autocomplete="new-password"
    required
  >
  <button type="submit">Sign In</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

← web scraping →