如何创建 HTML 付款自动填写表格

Question

我想创建一个 HTML 表单，用户将使用该表单输入他的付款信息（卡、姓名、到期日）。我希望表单能够自动填充。这意味着，如果用户将他或她的卡片添加到 Web 浏览器，则会弹出一个下拉菜单以便于自动填充。

我的表格代码如下。一切正常，但名称和姓氏部分除外。我在 whatwg.org 上阅读了这篇 link 后制作了这张表格。但是 cc-name 仍然不起作用。

我查看了 Google，但我找到的关于这个主题的信息到处都是，而且似乎没有标准。

更糟糕的是，如果我查看其他网站上的其他有效表格。我看到他们的表格中的信息甚至更不合适。

这个自动填充是如何工作的？

<script>
  form.requestAutocomplete();
  event.preventDefault();
</script>

<div class="form-group">
  <label class="col-sm-2 control-label">Numer Karty</label>
  <div class="col-xs-5">
    <input data-braintree-name="number" class="form-control" autocomplete="cc-number" type="text" placeholder="0000 0000 0000 0000"  required="true" name="ccnumber" inputmode="numeric">
  </div>
</div>

<div class="form-group">
  <label class="col-sm-2 control-label">Imię i Nazwisko</label>
  <div class="col-xs-5">
    <input data-braintree-name="cardholder_name" class="form-control" autocomplete="cc-name" type="text" placeholder="Imię i Nazwisko" required="true" name="ccname">
  </div>
</div>

<div class="form-group">
  <label class="col-sm-2 control-label">Ważność</label>
  <div class="col-sm-10">
    <div class="form-inline">
      <input data-braintree-name="expiration_month" class="form-control" autocomplete="cc-exp-month" type="text" placeholder="Miesiąc" required="true" name="ccexpmonth" inputmode="numeric">
      <input data-braintree-name="expiration_year" class="form-control" autocomplete="cc-exp-year" type="text" placeholder="Rok" required="true" name="ccexpyear" inputmode="numeric">
    </div>
  </div>
</div>

Answer 1

事实证明，浏览器的自动填充功能仅在您使用 HTTPS 连接时才有效。聪明，但是找不到这个信息。

我希望这对下一个人有帮助:)

如何创建 HTML 付款自动填写表格

How to create a HTML form for payment autofill

html

payment

autocomplete

autofill