You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/topics/forms/help/autocomplete.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,22 +4,22 @@ layout: default
4
4
parent: Provide help
5
5
nav_order: 3
6
6
has_video: true
7
-
description: The HTML autocomplete attribute tells the browser what type of value is expected when filling out form field.
7
+
description: The HTML autocomplete attribute tells the browser what type of value is expected when filling out a form field.
8
8
---
9
9
10
10
# Autocomplete in a form
11
11
12
-
The HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete) attribute tells the browser what type of value is expected when filling out form field. Browsers store what users have entered before. Browsers can then use those saved values to automatically fill out fields.
12
+
The HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete) attribute tells the browser what type of value is expected when filling out a form field. Browsers store what users have entered before. Browsers can then use those saved values to automatically complete fields.
13
13
14
14
Data such as names, addresses, and phone numbers can then be filled in automatically by the browser.
15
15
16
16
Autocomplete is helpful for users who have difficulty typing, have memory issues, struggle with language or just love the convenience of not typing the same data over and over again.
17
17
18
18
## Use autocomplete when a value is defined
19
19
20
-
WCAG contains a complete [list of values for autocomplete](https://www.w3.org/TR/WCAG22/#input-purposes). Always use an `autocomplete` attribute if a value for a form field is defined in this list.
20
+
WCAG contains a complete [list of values for autocomplete](https://www.w3.org/TR/WCAG22/#input-purposes). Always use an `autocomplete` attribute if a value for a form field is defined in this list and the value to be added is information about the current user.
21
21
22
-
When using `autocomplete`, it is important that the label always remains visible. The user needs to know whether the correct value has been entered in the according field.
22
+
When using `autocomplete`, it is important that the label always remains visible. The user needs to know whether the correct value has been entered in the related field.
23
23
24
24
{: .callout .tip }
25
25
**Tip**: The autocomplete value for City is `address-level2`.
@@ -40,7 +40,7 @@ Note: `aria-autocomplete` has a different purpose and usage than autocomplete on
40
40
41
41
## Pre-fill known information where possible
42
42
43
-
This doesn't address 'autocomplete', but it is related: if the user is logged in, use known information to pre-fill fields. For example, if a session already contains available information that could be used to pre-fill fields or make it available for the user to select. Like, for example, a shipping address for an online order.
43
+
This doesn't address 'autocomplete', but it is related: if the user is logged in, use known information to pre-fill fields. For example, if a session already contains information that could be used to pre-fill fields, such as a shipping address for an online order.
Copy file name to clipboardExpand all lines: docs/topics/forms/help/avoid-input-masks.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,12 +42,12 @@ You can restrict a first-name input field to, for example, a minimum of 3 and a
42
42
id="firstname"
43
43
name="firstname"
44
44
type="text"
45
-
pattern="\w{3,16}"
45
+
pattern="\w{3,12}"
46
46
autocomplete="given-name"
47
47
/>
48
48
```
49
49
50
-
You can require a specific format for a phone number input field. Too bad if you no longer have a landline or want to provide an international number.
50
+
You can require a specific format for a phone number input field. This can fail if you want to provide a number outside the expected parameters, such as an international number.
51
51
52
52
```html
53
53
<!-- Inaccessible code, do not use -->
@@ -83,7 +83,7 @@ If exact input is required, for example for a date of birth, provide an option t
83
83
84
84
### WCAG Success Criteria for descriptions
85
85
86
-
Providing good feedback about correctly entering data in form fields is necessary to meet the WCAG success criteria:
86
+
Providing good feedback about how to correctly enter data in form fields is necessary to meet the WCAG success criteria:
87
87
88
88
-[3.3.1 Error Identification](https://www.w3.org/WAI/WCAG22/quickref/#error-identification) (Level A)
Copy file name to clipboardExpand all lines: docs/topics/forms/help/be-flexible.md
+11-5Lines changed: 11 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,28 +3,30 @@ title: Be flexible
3
3
layout: default
4
4
parent: Provide help
5
5
nav_order: 3
6
-
description: Be flexible accepting the data a user fills out a field.
6
+
description: "Be flexible in accepting the data a user fills out in a field.
7
7
---
8
8
9
9
# Don’t reject a form entry too quickly
10
10
11
-
Be flexible accepting the data a user fills out a field. If it's not exactly in the format you want, change it for them in the code.
11
+
"Be flexible in accepting the data a user fills out in a field. If it's not exactly in the format you want, change it for them in the code.
12
12
13
13
{: .info .callout}
14
14
**Note**: this is best practice and not a WCAG requirement.
15
15
16
16
## Date formats
17
17
18
-
Users may unknowingly enter a different separation character then planned and then get the warning "Invalid date". While actually it's not invalid, it's not in your preferred format.
18
+
Users may enter a different separation character than you expected and get the warning "Invalid date". Though it's actually not invalid; it's just not in your expected format.
19
19
20
-
For example January 1, 2026 can be entered as:
20
+
For example, January 1, 2026 can be entered as:
21
21
22
22
- 01.01.2026
23
23
- 01-01-2026
24
24
- 01/01/2026
25
25
26
26
Why not help the user and transform the separation character in your software for them?
27
27
28
+
Be sure to make it clear in your field description or label whether the data is expected as "Month-Day" or as "Day-Month", as these can be ambiguous.
29
+
28
30
## Email addresses
29
31
30
32
Some people use a + in their email address, for example to make it easier to group emails.
@@ -35,6 +37,10 @@ Email addresses with a plus sign are valid.
35
37
36
38
## Postal codes
37
39
38
-
[Postal codes](https://en.wikipedia.org/wiki/List_of_postal_codes) can be written in different ways, for example in the Netherlands as: “1234 AA” (with a space), “1234AA” (without a space), or “1234aa” (lowercase). Extra spaces at the beginning or end can also be included when text is copied and pasted.
40
+
[Postal codes](https://en.wikipedia.org/wiki/List_of_postal_codes) can be written in many ways, for example in the Netherlands as: “1234 AA” (with a space), “1234AA” (without a space), or “1234aa” (lowercase).
41
+
42
+
US postal codes can either be five digits or five digits, a hyphen, and four digits, e.g. '12345-2345' or '12345'. UK Postal codes vary in length between 5 and 7 characters in two parts, with both parts able to contain a mix of letters and numbers.
43
+
44
+
Extra spaces at the beginning or end can also be included when text is copied and pasted.
39
45
40
46
In code, these variations can easily be normalized to a single format. By accepting all valid ways and letting the software correct them, you prioritize the user instead of your software.
Copy file name to clipboardExpand all lines: docs/topics/forms/help/copy-paste.md
+6-4Lines changed: 6 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,14 +3,16 @@ title: Allow copy/paste
3
3
layout: default
4
4
parent: Provide help
5
5
nav_order: 2
6
-
description: Copying and pasting from a password manager is a much easier and safer way for users to enter a password.
6
+
description: Copying and pasting is a much easier and safer way for users to enter secure data.
7
7
---
8
8
9
-
# Allow copying and pasting of passwords
9
+
# Allow copying and pasting of data in a form field
10
10
11
-
A password needs to be secure. If you prevent copying and pasting of passwords, you force users to choose simple, easy-to-remember passwords. That is exactly what you want to avoid.
11
+
Personal data needs to be secure. This includes any personal or private information, including bank account numbers, national identification numbers, or any complex data where accuracy is paramount.
12
12
13
-
Copying and pasting from a password manager is a much easier and safer way for users to enter a password. As explained by the UK National Cyber Security Centre in [Top tips for staying secure online](https://www.ncsc.gov.uk/collection/top-tips-for-staying-secure-online).
13
+
If you prevent copying and pasting of, for example, a password, you force users to choose simple, easy-to-remember passwords. That is exactly what you want to avoid.
14
+
15
+
Copying and pasting from a password manager is a much easier and safer way for users to enter data. As explained by the UK National Cyber Security Centre in [Top tips for staying secure online](https://www.ncsc.gov.uk/collection/top-tips-for-staying-secure-online).
Copy file name to clipboardExpand all lines: docs/topics/forms/help/valid-values.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ description: Provide valid values for an input field in the description.
10
10
11
11
Provide valid values for an input field (for example, date or password requirements) in the description and not only in the placeholder.
12
12
13
-
Also consider whether it is really important that, for example, a date of birth or phone number must meet exact input requirements.
13
+
Also consider whether it is really important that, for example, a date of birth or phone number must meet exact input requirements. If you can reformat the value provided to meet your internal needs, then it should not matter how the user formats the data.
14
14
15
15

0 commit comments