如何为付款自动填充创建 HTML 表单

Question

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

我的表单代码如下。除了姓名和姓氏部分外，一切正常。我在阅读whatwg.org 上的此链接后制作了此表格。但是 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 连接时才有效。聪明，但找不到此信息。

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