# Improving AutoFill experiences for your forms Use well-structured, standardized markup to enable a more reliable AutoFill experience for forms on your website. ## 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/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](https://html.spec.whatwg.org/dev/form-control-infrastructure.html#attr-fe-autocomplete). > Note: Safari ignores `autocomplete="off"`, instead letting customers control the types of AutoFill that they enable from [Safari Settings](https://support.apple.com/guide/safari/autofill-ibrwa005/18.0/mac/26.0). 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 . ## 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 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) element provides an easy way to accomplish this for most input fields, allowing you to either nest the `` inside the ``, or add the `for` attribute to the label and set the value to the `id` attribute of the `` it labels. ```html First Name First Name ``` Alternatively, you can add the [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) attribute to any element and set it to the `id` of the element containing the text that labels the control. ```html First 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 `` elements because they come with additional benefits, like allowing clicking or tapping on the `` to interact with the ``, which can make it easier to interact with controls like checkboxes by increasing the clickable area. If you enable the [developer features in Safari](/documentation/Safari-Developer-Tools/enabling-developer-features), you can use [Web Inspector](/documentation/Safari-Developer-Tools/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](https://webkit.org/web-inspector/elements-tab/#node-panel). 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 [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form) elements help separate different forms on your pages. Even if you don’t use the built-in support `` elements provide for submitting data and instead implement submission via JavaScript, using `` 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 `` elements — one for each form. Similarly, place any other forms on the page, like a search form, in their own ``. ## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation). The [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types) 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/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. > Important: Avoid using the `pattern` attribute to enforce restrictions like only using the Latin alphabet or forcing customers to enter phone numbers with dashes between groups of numbers, because these conventions can vary across the world. When possible, be flexible with input validation in situations where you can correctly format the information yourself afterward, like a phone number where you allow both hyphenated and nonhyphenated entry, and strip nonnumeric characters after submission. 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 . > Note: To help ensure that AutoFill works seamlessly across the web, Apple archives copies of live webpages. Apple uses the layout and structure of the archived pages to evaluate and improve the AutoFill experience. > > For pages that require an account for access, accounts are manually created and logged in to for the purpose of archiving forms. Websites can prevent this manual archiving of pages behind login by blocking account creation or preventing login for accounts with usernames and email address names ending with `safariautofill`. For example, an email address matching this format could be `testaccountsafariautofill@example.com`. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)