> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt)
# Add Address Autofill to a form on a website
In this tutorial, you will learn how to add [Mapbox Address Autofill](https://docs.mapbox.com/mapbox-search-js/api/web/autofill/) to a form on your website. Address Autofill is a feature provided by the [Mapbox Search JS](https://docs.mapbox.com/mapbox-search-js/) library. It helps users fill out address forms by suggesting addresses as they type. This can significantly improve the user experience on your website and prevent errors in address input, which is especially important for e-commerce sites and other applications that require address input.
You will learn how to:
- Set up an HTML address form
- Add autocomplete attributes
- Import Mapbox Search JS
- Initialize Address Autofill
This tutorial is geared towards e-commerce websites and other simple applications with HTML forms. For complex single-page applications (SPAs) or React, consider using [Mapbox Search JS React](https://docs.mapbox.com/mapbox-search-js/api/react/) or wrapping the HTML Custom Element for Address Autofill.
> **Related content (related): [Search JS React](https://docs.mapbox.com/mapbox-search-js/api/react/)**
>
> Integrate rich UI components in React, built on top of Mapbox Search JS. This is the recommended entry-point for large-scale applications.
> **Related content (example): [Autofill suggestions (custom elements)](https://docs.mapbox.com/mapbox-search-js/example/simple-autofill-custom-elements/)**
>
> Use HTML Custom Elements to add autofill suggestions with Address Autofill in this interactive demo.
## Prerequisites
To complete this tutorial, you will need:
- **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Developer Console.
- **Ability to change your site.** Like other frameworks (for example, analytics), you should have a way to add "tags" or code snippets to your website for use at checkout.
- If you do not have direct HTML access, [Google Tag Manager](https://developers.google.com/tag-platform/tag-manager/web) allows you to run JavaScript on your site without changing the HTML.
## Find the HTML for your address input form
Your address form will have a `
```
## Set up autocomplete attributes
Address Autofill requires an HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute on each of the inputs of your address form. It uses these attributes to know which values to place in each field when the user selects an address from the suggestions (for example, the street address in the address field, the city in the city field, etc.).
You may already have autocomplete attributes set up, but if not, you can add them to your form inputs.
### Check for existing autocomplete attributes
You can check for the existence of autocomplete attributes on your website using the JavaScript Console. After opening the Console, run the following command:
```javascript
document.querySelector('[autocomplete~="street-address"], [autocomplete~="address-line1"]') != null
```
The output will read `true` if autocomplete attributes are present.
If the output is `false`, you will need to add the autocomplete attributes to your form inputs.
### Add autocomplete attributes
If autocomplete attributes are not present, you'll have to add them to each HTML input you'd like to autofill.
Here are common autocomplete attributes for address forms. This is a non-exhaustive list, see the full list at [whatwg.org](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
| Autocomplete tag | Description | Example |
| --- | --- | --- |
| `autocomplete="address-line1"` | The first line of an address, usually includes the street number and street. | 740 15th St NW |
| `autocomplete="address-line2"` | The second line of an address, usually an apartment number. | Apartment 700 |
| `autocomplete="address-level1"` | The **least** specific administrative level. In the United States, this is the state or territory. | District of Columbia |
| `autocomplete="address-level2"` | The second **least** specific administrative level. In the United States, this is the city. | Washington |
| `autocomplete="address-level3"` | In countries with more than two administrative levels. | |
| `autocomplete="postal-code"` | The postal code of the administrative level. | 20005 |
| `autocomplete="country"` | The standardized country code. | us |
| `autocomplete="country-name"` | The country name. *Note: These are non-standardized.* | United States |
Here is the form from the previous step with the appropriate autocomplete attributes added to each input. If you have different fields in your form, make sure to adjust the autocomplete attributes to match your inputs.
```html
Mapbox Autofill Form
```
## Add Mapbox Search JS
Now that your form has autocomplete attributes in place, you can add Mapbox Search JS and implement Address Autofill. To do this, you will add two `