Improving AutoFill experiences for your forms

Overview

AutoFill in Safari lets people automatically fill in credit card information, contact information, and credentials into forms on your webpages. With AutoFill, people can securely sign in to your website using credentials from their password manager, purchase products from your website quickly using payment information they previously saved, and accurately fill in shipping information to help make sure products ship to the correct address.

AutoFill works best when you use well-structured semantic markup to define the forms, inputs, and labels on your webpage. Safari uses multiple signals from your webpage to determine what information to offer people for filling in a particular input element. Even when customers don’t use AutoFill, these signals still help Safari provide a better user experience by offering tailored keyboards and input methods for different types of form controls.

Indicate the purpose of each input

Safari considers the autocomplete attribute when determining how to fill a field. For example, add autocomplete="given-name" and autocomplete="family-name" to the first and last name fields, respectively, to make it more likely that Safari offers to fill the customer’s first and last names into the fields. You can find valid values for the autocomplete attribute in the HTML Living Standard.

Providing a value for the autocomplete attribute is particularly helpful for login flows where the purposes of form controls are otherwise difficult for AutoFill to detect, such as when form controls for login span multiple pages. To learn more about enabling Password AutoFill on elements, see Enabling Password AutoFill on an HTML input element.

Associate inputs with their labels

Both AutoFill and assistive technologies like VoiceOver benefit from a strong relationship between inputs and the text that labels them on your webpages. The <label> element provides an easy way to accomplish this for most input fields, allowing you to either nest the <input> inside the <label>, or add the for attribute to the label and set the value to the id attribute of the <input> it labels.

<!-- An implicitly associated label -->
<label>
    First Name
    <input autocomplete="given-name" />
</label>

<!-- An explicitly associated label -->
<label for="first-name">First Name</label>
<input id="first-name" autocomplete="given-name" />

Alternatively, you can add the aria-labelledby attribute to any element and set it to the id of the element containing the text that labels the control.

<!-- Assigning a label from the control itself -->
<label id="first-name-label">First Name</label>
<input aria-labelledby="first-name-label" autocomplete="given-name" />

Both approaches correctly associate the label text with the input and improve the accuracy of filling suggestions that Safari offers and the accessibility of your webpage for customers using VoiceOver. Prefer using <label> elements because they come with additional benefits, like allowing clicking or tapping on the <label> to interact with the <input>, which can make it easier to interact with controls like checkboxes by increasing the clickable area.

If you enable the Enabling features for web developers, you can use Web Inspector to inspect your form controls to confirm that you correctly associated labels with each control.

1. To open Web Inspector, Control-click on a form control and choose Inspect Element.

2. In the Elements tab, navigate to the Node details sidebar.

3. Find the Accessibility section.

4. Check the Label value and make sure it contains the text that labels the selected form control.

Use form elements to group logically related inputs

<form> elements help separate different forms on your pages. Even if you don’t use the built-in support <form> elements provide for submitting data and instead implement submission via JavaScript, using <form> elements can help separate different actions a customer can take. For example, for a page with separate login and new account forms, use two different <form> elements — one for each form. Similarly, place any other forms on the page, like a search form, in their own <form>.

Validate controls using built-in validation instead of custom JavaScript

HTML provides numerous ways to configure form controls to ensure they accept only expected values without using JavaScript. This allows WebKit to enforce common validation rules on your behalf, and allows Safari to offer relevant AutoFill suggestions that are appropriate for your form controls. Attributes like type, minlength, maxlength, and pattern let you limit the number and type of characters in the control. To learn more about form validation, see Using HTML form validation and the Constraint Validation API.

The type attribute allows browsers to provide helpful input methods for different types of information, like presenting a keypad tailored to entering a phone number in iOS when using the tel value, or obscuring the typed value when using the password value. Form validation takes some type values into account, like email, to help ensure people don’t submit forms with an improperly formatted email address.

The pattern attribute is particularly useful because it allows you to limit the types of characters the control accepts as valid. For example, a credit card number control could specify a pattern like [0-9] to ensure only digits are valid.

The passwordrules attribute allows Safari to suggest an appropriate strong password if your webpage has uncommon restrictions on passwords, which may exist to remain compatible with other technologies. Because character limitations in passwords may frustrate customers trying to create an account, accept a wide variety of special characters whenever possible on your website. When necessary, the passwordrules attribute lets you be specific about requirements like requiring at least one uppercase character, lowercase character, and digit. To learn more about customizing Password AutoFill rules, see Customizing Password AutoFill rules.