Web features: [\](https://webstatus.dev/features/input) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). Create a form that makes it as easy as possible for users to enter address data on desktop and mobile. Ensure the form makes the most of built-in browser features for autofill, validation and data entry constraints. ## How to implement Outlined below are the most important guidelines for building successful address forms. ### Use meaningful, valid HTML Make the most of the elements and attributes built for creating forms: - `

`, ``, ``, and `` - `type`, `autocomplete`, and `inputmode` These enable built-in browser functionality, improve accessibility, and add meaning to markup. ### Use the `` element to label form fields for data entry To label an ``, ``, or ``, use a `<label>`. Associate a label with an input by giving the label's `for` attribute the same value as the input's `id`. ### Make the most of HTML attributes Make it easy for users to enter data, by using the appropriate `<input>` element with a `type` attribute to provide the right keyboard on mobile and enable basic built-in validation by the browser. Always use `type="email"` for email addresses and `type="tel"` for phone numbers. ```html <!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation --> <input type="email" id="email" name="email" autocomplete="email" required> <input type="tel" id="phone" name="phone" autocomplete="tel"> ``` Every `<input>`, `<select>`, and `<textarea>` element SHOULD have an appropriate `autocomplete` attribute, to improve accessibility and help users avoid re-entering data. ### Make buttons helpful Use `<button>` for buttons. You can also use `<input type="submit">`, but don't use a `div` or some other random element acting as a button. Button elements provide accessible behaviour, built-in form submission functionality, and can easily be styled. Give each form submit button a value that says what it does. For each step towards checkout, use a descriptive call-to-action that shows progress and makes the next step obvious. For example, label the submit button on your delivery address form **Proceed to Payment** rather than **Continue** or **Save**. ### Use a single name input where possible Allow your users to enter their name using a single input, unless you have a good reason for separately storing given names, family names, honorifics, or other name parts. Using a single name input makes forms less complex, enables cut-and-paste, and makes autofill simpler. Use `autocomplete="name"` for a single input for name. ```html <input type="text" id="fullname" name="fullname" autocomplete="name"> ``` Allow international names. For validation, avoid using regular expressions that only match Latin characters. Latin-only excludes users with names or addresses that include characters that aren't in the Latin alphabet. Allow Unicode letter matching instead---and ensure your backend supports Unicode securely as both input and output. Unicode in regular expressions is well supported by modern browsers. ### Allow for a variety of address formats When building an address form, be aware of the variety of address formats, even within a single country. Do not make assumptions about "normal" addresses. Use a single `<textarea>` element for the street address if possible. ```html <!-- textarea handles multi-line international address formats that split inputs can't accommodate --> <textarea id="address" name="address" autocomplete="street-address" required> ``` This is the most flexible option for a variety of local and international address formats. If your data model needs separate address lines, use one `` per line with the `address-line1`, `address-line2` (and, if needed, `address-line3`) `autocomplete` tokens so that autofill still works. Don't split the street address across inputs that lack these tokens, and make only the first line required. ```html ``` ### Help save users from accidentally missing data fields Add the `required` attribute to mandatory fields. ```html ``` ### Fallback strategies Baseline status for the html.elements.input.autocomplete capability: Widely available. It's been Baseline since 2015-07-29. Supported by: Chrome 14 (Sep 2011), Edge 12 (Jul 2015), Firefox 4 (Mar 2011), and Safari 6 (Jul 2012). Autofill is a progressive enhancement. In browsers that do not support autofill, users will simply need to manually enter their address details. The semantic HTML constraints (such as `type`, `inputmode`, and `required`) will still function appropriately as standard form validation. Source: [autofill-address-form guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/forms/autofill-address-form/guide.md)