blob: 0742af0fbd3609ba6acd41202755a912208dda23 (
plain)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
breadcrumbs:
- - /developers
- For Developers
- - /developers/design-documents
- Design Documents
page_name: form-styles-that-chromium-understands
title: Password Form Styles that Chromium Understands
---
### Automatically Comprehensible Password Forms
You can help ensure that browsers' and extensions' password management
functionality can understand your site's sign-up, sign-in and change-password
forms by enriching your HTML with a dash of metadata. In particular:
1. Add an
`[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)`
attribute with a value of `username` for usernames.
2. If you've implemented an "[email
first](https://developers.google.com/identity/toolkit/web/account-chooser#email_first)"
sign-in flow that separates the username and password into two
separate forms, include a form field containing the username in the
form used to collect the password. You can, of course, hide this
field via CSS if that's appropriate for your layout.
3. Add an
`[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)`
attribute with a value of `current-password` for the password field
on a sign-in form.
4. Add an
`[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)`
attribute with a value of `new-password` for the password field on
sign-up and change-password forms.
5. If you require the user to type their password twice during sign-up
or password update, add the `new-password`
`[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)`
attribute on both fields.
#### Sign-in Form:
<form id="login" action="login.php" method="post"> <input type="text"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="username"**>
<input type="password"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="current-password"**>
<input type="submit" value="Sign In!"> </form>
#### Email First Sign-in Flow:
Collect the email: <form id="login" action="login.php" method="post">
<input type="text"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="username"**>
<input type="submit" value="Sign In!"> </form> Then collect the
password, but include the email as the value of a hidden form field:
<style> #emailfield { display: none; } </style> <form id="login"
action="login.php" method="post"> <input id="emailfield" type="text"
**value="me@example.test"**
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="username"**>
<input type="password"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="current-password"**>
<input type="submit" value="Sign In!"> </form>
#### Sign-up Form:
<form id="login" action="signup.php" method="post"> <input type="text"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="username"**>
<input type="password"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="new-password"**>
<input type="submit" value="Sign Up!"> </form> Or: <form
id="login" action="signup.php" method="post"> <input type="text"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="username"**>
<input type="password"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="new-password"**>
<input type="password"
**[autocomplete](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute)="new-password"**>
<input type="submit" value="Sign Up!"> </form>
### Related advice
Further tips beyond just autocomplete attributes are listed in the [Create
Amazing Password Forms
page](/developers/design-documents/create-amazing-password-forms).
There are also useful [autocomplete attribute values for annotating address
forms](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill).
|
