Autofill - FORMCYCLE Wiki

You can define the value for autocomplete for input fields, so that browsers can help users fill out forms via autocompletion. Choosing the right type ensures that browsers only suggest the appropriate values, such as email addresses or phone numbers.

3

4

5

Browsers have a feature called autocomplete that suggests commonly used values form input fields when users are filling out forms. But browsers do not know which type of content is expected in a certain input field and may suggest inappropriate content. With these properties, you can tell browsers which type of content you expect in an input field and improve the user experience for your forms. For example, when you expect an email address and you choose the corresponding option for an input field, browsers will only suggest email addresses for that input field.

6

7

On a technical level, this feature uses the HTML attribute //autocomplete//. Some useful links:

8

9

* [[Possible values for the autocomplete attribute at MDN Web Docs>>url:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete]]

10

* [[W3C specification for the autocomplete attribute>>url:https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute]]

11

* [[WCAG 2 Test Rules for the autocomplete attribute>>url:https://www.w3.org/WAI/standards-guidelines/act/rules/autocomplete-valid-value-73f2c2/]]

|=Name|=Description

|Value|The expected content type for the input field. When set, browsers will try and suggest only appropriate values.

16

|Category|The available options depend on the selected value. You can use the category to further restrict the content type. For example, for email addresses, you can restrict the allowed email addresses to private or business addresses.

17

|Section|Optional. When set, the //autocomplete// attributs is prefixed with a //section-*// value. This is useful, for example, when your form contains multiple different addresses. An address usually consists of several input fields, such as an input field for the country, for the ZIP code or for the street name. When you assign all fields that belong to the address 1 to the section //one//, and all fields belonging to the address 2 to the section //two//, browsers can distinguish between the two different addresses and autofill only the section for which the user selected an address.

18

Wiki source code of Autofill

Navigation

author	version	line-number	content
		1	{{figure image="designer-properies-autofill-en-1.png"}}
		2	You can define the value for autocomplete for input fields, so that browsers can help users fill out forms via autocompletion. Choosing the right type ensures that browsers only suggest the appropriate values, such as email addresses or phone numbers.
		3	{{/figure}}
		4
		5	Browsers have a feature called autocomplete that suggests commonly used values form input fields when users are filling out forms. But browsers do not know which type of content is expected in a certain input field and may suggest inappropriate content. With these properties, you can tell browsers which type of content you expect in an input field and improve the user experience for your forms. For example, when you expect an email address and you choose the corresponding option for an input field, browsers will only suggest email addresses for that input field.
		6
		7	On a technical level, this feature uses the HTML attribute //autocomplete//. Some useful links:
		8
		9	* [[Possible values for the autocomplete attribute at MDN Web Docs>>url:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete]]
		10	* [[W3C specification for the autocomplete attribute>>url:https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute]]
		11	* [[WCAG 2 Test Rules for the autocomplete attribute>>url:https://www.w3.org/WAI/standards-guidelines/act/rules/autocomplete-valid-value-73f2c2/]]
		12
		13	{{table dataTypeAlpha="0" colWidth="-500"}}
		14	\|=Name\|=Description
		15	\|Value\|The expected content type for the input field. When set, browsers will try and suggest only appropriate values.
		16	\|Category\|The available options depend on the selected value. You can use the category to further restrict the content type. For example, for email addresses, you can restrict the allowed email addresses to private or business addresses.
		17	\|Section\|Optional. When set, the //autocomplete// attributs is prefixed with a //section-*// value. This is useful, for example, when your form contains multiple different addresses. An address usually consists of several input fields, such as an input field for the country, for the ZIP code or for the street name. When you assign all fields that belong to the address 1 to the section //one//, and all fields belonging to the address 2 to the section //two//, browsers can distinguish between the two different addresses and autofill only the section for which the user selected an address.
		18	{{/table}}