|
5 | 5 | - samdutton
|
6 | 6 | scheduled: true
|
7 | 7 | date: 2020-06-29
|
8 |
| -updated: 2021-02-26 |
| 8 | +updated: 2021-09-21 |
9 | 9 | description: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
|
10 | 10 | hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
|
11 | 11 | alt: A person holding a phone.
|
@@ -48,8 +48,7 @@ Here is an example of a simple sign-in form that demonstrates all of the best pr
|
48 | 48 | `<label>`, and `<button>`.
|
49 | 49 | * [Label each input with a `<label>`](#label).
|
50 | 50 | * Use element attributes to [access built-in browser
|
51 |
| - features](#element-attributes): `type`, `name`, `autocomplete`, `required`, |
52 |
| - `autofocus`. |
| 51 | + features](#element-attributes): `type`, `name`, `autocomplete`, `required`. |
53 | 52 | * Give input `name` and `id` attributes stable values that don't change
|
54 | 53 | between page loads or website deployments.
|
55 | 54 | * Put sign-in [in its own <form> element](#single-form).
|
@@ -212,17 +211,6 @@ password if necessary.
|
212 | 211 | This is where the magic really happens!
|
213 | 212 | Browsers have multiple helpful built-in features that use input element attributes.
|
214 | 213 |
|
215 |
| -### Help users start faster {: #autofocus } |
216 |
| - |
217 |
| -Add an `autofocus` attribute to the first input in your sign-in form. That makes |
218 |
| -it clear where to start and, on desktop at least, means users don't have to |
219 |
| -select the input to start typing. |
220 |
| - |
221 |
| -<figure class="w-figure"> |
222 |
| - {% Img src="image/admin/27x2icJSXCMdfWOjVAdR.png", alt="Screenshot showing form input with autofocus.", width="500", height="451", class="w-screenshot" %} |
223 |
| - <figcaption class="w-figcaption">Autofocus provides clear visual focus on desktop.</figcaption> |
224 |
| -</figure> |
225 |
| - |
226 | 214 | ## Keep passwords private—but enable users to see them if they want {: #show-password }
|
227 | 215 |
|
228 | 216 | Passwords inputs should have `type="password"` to hide password text and help the
|
|
0 commit comments