Question

我正在尝试为发货详细信息（例如姓名，姓氏，街道，邮政编码等）创建自动填写表格。我希望根据选择的“配置文件”自动填写表单-如果用户多次使用该网站，则该数据之前已经填写完毕，以避免重新输入数据。填写表单时，单击“提交”，然后返回到订单页面，则无法自动填充。

尝试：

原始代码，无任何更改：

<form class="f-form f-form--basket checkout">
    <div class="f-form__col">
        <div class="f-field f-field--text">
            <label class="f-field__label" >
                First name
            </label>
            <input type="text" class="f-field__control"  name="firstName" placeholder="First name*" required>
        </div>
    </div>
    <div class="f-form__col">
        <div class="f-field f-field--text">
            <label class="f-field__label">
                Last name
            </label>
            <input type="text" class="f-field__control"  name="lastName" placeholder="Last name*" required>
        </div>
    </div>
    <button class="c-btn">
        Pay!
    </button>
</form>

Answer 1

您说过，您的目标是使用“先前已填写的数据”“自动填充”空白表格。这是两个似乎在这里交叉了的想法：

您链接到的文档页面引用了一个称为“自动填充”的浏览器功能，即个人用户可以在自己工作站的浏览器中填写有关自己的信息（人口统计信息，例如姓名和电子邮件，以及运送地址信息），然后浏览器可以帮助他们正确填写表单。

如果您要填写的字段是标准的受众特征字段，则这种功能对您来说将很有效。但是为了使用户能够利用它，用户必须更新浏览器的首选项以设置自己的“自动填充配置文件”（作为HTML / JS网站开发人员，您无法做到这一点。

您所说的第二部分引用了数据“它们已经填写”；大概您是说他们是第一次在您的网站上填写这些信息？为了使该想法生效，您需要以某种方式保存用户输入的信息。您可以将数据客户端存储在cookie或其他HTML5本地存储选项中，并在用户再次访问该页面时或者如果用户拥有您的帐户并登录后，使用Javascript重新填充这些值。，您可以将该数据保存在后端，并使用已填充的默认值生成HTML，或者构建其他API端点以通过前端的Javascript / AJAX来获取其默认值。

自动填充表单不适用于所有浏览器

1 个答案: