Payment and address form best practices

Checklist.md

- [Use meaningful HTML elements](#meaningful-html): `<form>`, `<input>`, `<label>`, and `<button>`.
- [Label each form field with a `<label>`](#html-label).
- Use HTML element attributes to [access built-in browser features](#html-attributes), in particular `type` and `autocomplete` with appropriate values.
- Avoid using `type="number"` for numbers that aren't meant to be incremented, such as payment card numbers. Use `type="text"` and [`inputmode="numeric"`](#make_it_easy_for_users_to_enter_data) instead.
- If an [appropriate autocomplete value](#autocomplete-attribute) is available for an `input`, `select`, or `textarea`, you should use it.
- To help browsers autofill forms, give input `name` and `id` attributes [stable values](#checkout-forms:%7E:text=giving%20form%20fields-,name%20and%20id%20attributes,-stable%20values%20that) that don't change between page loads or website deployments.
- [Disable submit buttons](#html-button) once they've been tapped or clicked.
- [Validate](#validate) data during entry—not just on form submission.
- Make [guest checkout](#guest-checkout) the default and make account creation simple once checkout is complete.
- Show [progress through the checkout process](#checkout-progress) in clear steps with clear calls to action.
- [Limit potential checkout exit points](#reduce-checkout-exits) by removing clutter and distractions.
- Show [full order details](#checkout-forms) at checkout and make order adjustments easy.
- [Don't ask for data you don't need](#unneeded-data).
- [Ask for names with a single input](#single-name-input) unless you have a good reason not to.
- [Don't enforce Latin-only characters](#unicode-matching) for names and usernames.
- [Allow for a variety of address formats](#address-variety).
- Consider using a [single `<textarea>` for address](#address-textarea).
- Use [autocomplete for billing address](#autocomplete-attribute).
- [Internationalize and localize](#internationalization-localization) where necessary.
- Consider avoiding [postal code address lookup](#postal-code-address-lookup).
- Use [appropriate payment card autocomplete values](#payment-form-autocomplete).
- Use a [single input for payment card numbers](#single-number-input).
- [Avoid using custom elements](#avoid_using_custom_elements_for_payment_card_dates) if they break the autofill experience.
- [Test in the field as well as the lab](#analytics-rum): page analytics, interaction analytics, and real-user performance measurement.
- [Test on a range of browsers, devices, and platforms](#test-platforms).

Source: [Payment and Address Form Best Practices](https://web.dev/articles/payment-and-address-form-best-practices)