How can you control autofill behavior with autocomplete?

3 How to limit autofill?

If you want to allow the browser to autofill some values but not others for a specific element, you can use a specific string value for the autocomplete attribute that matches the type of data expected. For example, if you have a form that asks for a user's name, email, and phone number, you may want the browser to autofill the name and email, but not the phone number, so you can use <input type="text" autocomplete="name">, <input type="email" autocomplete="email">, and <input type="tel" autocomplete="off">. This way, you can improve the user experience by saving them time and reducing errors, but also respect their privacy and preferences.

4 How to customize autofill?

If you want to provide more specific or granular autofill suggestions for a specific element, you can use a more detailed string value for the autocomplete attribute that describes the subcategory or context of the data expected. For example, if you have a form that asks for a user's billing address, you may want the browser to autofill the address fields based on the user's previous purchases, not their general profile, so you can use <input type="text" autocomplete="billing name">, <input type="text" autocomplete="billing street-address">, and so on. This way, you can enhance the accuracy and relevance of the autofill suggestions, and also avoid confusion or conflicts with other forms.

5 How to group autofill?

If you want to associate multiple elements with the same autofill data, you can use the same string value for the autocomplete attribute for all of them. For example, if you have a form that asks for a user's shipping address, and you want to offer the option to use the same address as the billing address, you can use <input type="checkbox" autocomplete="shipping"> to indicate that the checkbox controls the shipping address, and then use <input type="text" autocomplete="shipping name">, <input type="text" autocomplete="shipping street-address">, and so on for the address fields. This way, you can simplify the form and avoid duplication or inconsistency of the autofill data.

6 How to test autofill?

If you want to check how your autocomplete attribute works for your form elements, you can use the browser's developer tools to inspect the elements and see their autofill values. You can also use the browser's settings to manage your autofill data, such as adding, editing, or deleting entries, or clearing the history. You can also use different browsers or devices to see how they handle autofill differently, and adjust your attribute values accordingly.