在某些表单中，Chrome 自动填充会提示信用卡自动填充。

编辑：添加屏幕截图。这与浏览器自动完成不同。您之前不必以相同的形式输入该值。

我应该如何编写 HTML 表单，以便浏览器将其检测为信用卡字段并触发此行为？

与 Stripe 表单一起使用的示例将是理想的。

这个问题很老了，但我有一个2019年更新答案!

现在，您只需命名即可告诉浏览器哪些字段用于信用卡信息<input>正确。

以下答案来自我的原始答案：https://stackoverflow.com/a/41965106/1696153 https://stackoverflow.com/a/41965106/1696153

这是官方的链接当前 WHATWG HTML 标准用于启用自动完成。 https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete

谷歌写了一个相当不错的指南 https://developers.google.com/web/fundamentals/design-and-ui/input/forms/#recommended_input_name_and_autocomplete_attribute_values用于开发对移动设备友好的 Web 应用程序。他们有一个部分介绍如何命名表单上的输入以轻松使用自动填充功能。尽管它是为移动设备编写的，但这适用于桌面和移动设备！

如何在 HTML 表单上启用自动完成功能

以下是有关如何启用自动完成功能的一些要点：

• Use a <label>为了你所有的<input> fields
• Add a autocomplete属性给你的<input>标签并使用此填写guide https://developers.google.com/web/fundamentals/design-and-ui/input/forms/#recommended_input_name_and_autocomplete_attribute_values.
• 命名你的name and autocomplete所有属性都正确<input> tags

• Example:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="[email protected] /cdn-cgi/l/email-protection" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected] /cdn-cgi/l/email-protection" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

如何命名你的<input> tags

为了触发自动完成，请确保您正确命名name and autocomplete你的属性<input>标签。这将自动允许表单上的自动完成。确保还有一个<label>！这个信息也可以查到here https://developers.google.com/web/fundamentals/design-and-ui/input/forms/#recommended_input_name_and_autocomplete_attribute_values.

以下是如何命名您的输入：

• Name
  • 使用其中任何一个name: name fname mname lname
  • Use any of these for autocomplete:
    • name（全名）
    • given-name（名字）
    • additional-name（中间名）
    • family-name（用于姓氏）
  • 例子：<input type="text" name="fname" autocomplete="given-name">
• Email
  • 使用其中任何一个name: email
  • 使用其中任何一个autocomplete: email
  • 例子：<input type="text" name="email" autocomplete="email">
• Address
  • 使用其中任何一个name: address city region province state zip zip2 postal country
  • Use any of these for autocomplete:
    • For one address input:
      • street-address
    • For two address inputs:
      • address-line1
      • address-line2
    • address-level1（州或省）
    • address-level2 (city)
    • postal-code（邮政编码）
    • country
• Phone
  • 使用其中任何一个name: phone mobile country-code area-code exchange suffix ext
  • 使用其中任何一个autocomplete: tel
• Credit Card
  • 使用其中任何一个name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Use any of these for autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Usernames
  • 使用其中任何一个name: username
  • 使用其中任何一个autocomplete: username
• Passwords
  • 使用其中任何一个name: password
  • Use any of these for autocomplete:
    • current-password（用于登录表格）
    • new-password（用于注册和密码更改表格）

资源

• 当前用于自动完成的 WHATWG HTML 标准。 https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete
• 来自 Google 的“创建令人惊叹的表单” https://developers.google.com/web/fundamentals/design-and-ui/input/forms/#recommended_input_name_and_autocomplete_attribute_values。貌似几乎天天更新。读得非常好。
• Google 的“通过自动填充帮助用户更快地结账” https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill2015年。