Forms Chrome如何检测信用卡字段？

在某些表单中，Chrome autofill会提示使用信用卡autofill

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

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

使用条带表单的示例是理想的。

从这个答案来看，Chrome要么在字段名上匹配regex模式，要么表单显式使用

x-autocompletetype

属性，如下所示（此示例使用“somename”避免在名称上混合匹配问题）：

实际上，您可以选择匹配的名称，也可以选择x-autocompletetype：

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

您的屏幕截图中有输入框的视图源吗？这将显示它是在名称上匹配还是在x-autocompletetype属性上匹配

我链接到的答案有多个链接以获取更多信息；我没有在这里重复

其他一些评论：

我知道Chrome会弹出一个是否保存信用卡信息的问题（我不知道），但我不知道它是否会弹出这个问题，不管它是如何检测到的。也就是说，我不确定Chrome是否会自动完成信用卡的单独字段以及其他字段，或者是否需要将整个内容保存为信用卡

你的问题是如何去做，而不是是否去做。但是从你问题中的评论来看，我同意你可能不想自动完成信用卡字段。就我个人而言，当它发生时，我感到不安，甚至知道它在我的浏览器中是本地的（我尤其对CVV有这种感觉，当我报告它时，会遇到惊人的阻力）。然而，有些帖子发现，当客户想使用Chrome、用信用卡设置Chrome，并且有网站阻止它时，会令人沮丧。

感谢您指导我找到正确答案

要触发信用卡自动填充

必须在表单上启用SSL

如果启用SSL，标准信用卡字段名的大多数变体都应该工作

---

是一个指向Chrome用来触发检测的正则表达式的链接

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

您现在只需正确命名

即可告诉浏览器哪些字段是信用卡信息。

下面的答案来自我的原始答案：

谷歌为开发对移动设备友好的web应用程序写了一份报告。他们有一节介绍如何命名表单上的输入，以便轻松使用自动填充。尽管它是为移动设备编写的，但它同时适用于桌面和移动设备

如何在HTML表单上启用自动完成 以下是有关如何启用自动完成的一些要点：

• 对所有
  字段使用

• 在您的
  标签中添加一个

  自动完成

  属性，并使用此属性进行填充
• 为所有
  标记正确命名您的

  名称

  和

  自动完成

  属性
• 示例：

  <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="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

  名称
  电子邮件
  确认电子邮件
  电话
  

如何命名您的

标签 要触发自动完成，请确保在

标记中正确命名

名称

和

自动完成

属性。这将自动允许表单上的自动完成。还要确保有一个

！也可以找到这些信息

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

• 名字
  • 对
    使用以下任一选项：

    name fname mname lname

  • 将其中任何一项用于自动完成：

    • 名称

      （全名）

    • 给定名称

      （用于名字）

    • 附加名称

      （用于中间名称）

    • 姓

      （姓氏）
  • 示例：

• 电子邮件
  • 对于

    名称
    ：
    电子邮件
    

  • 将其中任何一项用于

    自动完成

    ：

    电子邮件

  • 示例：

• 地址
  • 将其中任何一项用于

    名称

    ：

    地址城市地区省州邮编zip2邮政国家

  • 将其中任何一项用于自动完成：
    • 对于一个地址输入：

      • 街道地址

    • 对于两个地址输入：

      • 地址行1

      • 地址行2

    • 地址级别1

      （州或省）

    • 地址级别2

      （城市）

    • 邮政编码

      （邮政编码）

    • 国家/地区

• 电话
  • 将其中任何一项用于

    名称
    ：
    手机国家/地区代码交换后缀ext

  • 将其中任何一项用于自动完成：

    电话

• 信用卡
  • 对于

    名称

    ：

    ccname卡号cvc ccmonth ccyear exp日期卡类型

  • 将其中任何一项用于自动完成：

    • cc名称

    • cc编号

    • cc csc

    • cc exp月

    • cc exp year

    • cc exp

    • cc类型

• 用户名
  • 将其中任何一项用于

    名称
    ：
    用户名
    

  • 将其中任何一项用于自动完成：

    用户名

  <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="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">