时间戳

首页 > 解决方案 > 如何在页面加载后填写输入表单？

html - 如何在页面加载后填写输入表单？

问题描述

在按下“提交”按钮后，我想保持填写表单字段。我注意到当页面加载时，我的字段被清除了，我希望他们保留我之前提供的数据。（我觉得浏览器默认情况下会这样做。）有没有简单的方法可以做到这一点？

现在，我正在使用 GET 操作，所以我可以看到我的所有数据，并且我的页面是一个纯 HTML 文件，以保持简单。我知道我可以使用 $_GET['whatever'] 读取所有文件并将值放回表单字段中，但我觉得有一种更简单的方法可以使表单中的所有字段保持完整。

我也尝试了一些会话技巧，但没有奏效。我也尝试去除多余的东西，比如我的标签，但没有任何作用。

我的页面现在很简单。我有一个基本形式：

<form name="filter" method="get" action="">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

我将提供一些值，提交（再次加载页面），它们将是空白的。它将我的变量传递给 URL 就好了，但我希望这些字段保持填充状态。

标签： htmlformssessioninputaction

解决方案

首先，您可以在标签中使用 autocomplete="on"<form>以确保可以从浏览器创建的下拉菜单中选择文本

<form name="filter" method="get" action="" autocomplete="on">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

虽然这适用于文本信息（不是真正的自动填充，但很好且易于使用），但这不适用于选项和标签选项

如果这种无能为力是一个交易破坏者，您可以尝试在用户单击提交时使用 JavaScript 将您的数据存储到 cookie 中。然后，当页面重新加载时，如果 cookie 存在，则使用 JavaScript 设置表单的值。

参考资料/有用信息：

您可以在哪里了解有关自动完成的更多信息： https ://www.w3schools.com/tags/att_form_autocomplete.asp

加载时选中复选框：使用 JavaScript（jQuery 或 Vanilla）选中/取消选中复选框？

页面加载后加载内容：页面加载后执行的 JavaScript

保存在复选框中： 获取选中复选框的值？

注意：你的另一种方法......就像你的 GET，它只是一个 cookie 是首先想到的。

推荐阅读