我有一个HTML表单：

<form id="myForm" method="POST" action="/submit" target="response-frame">
        <div class="input">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" value="x" />
        </div>

        <div class="input">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" value="[email protected]" />
        </div>

        <button type="submit">Submit</button>
        <button type="loadValues" onclick="setFormValues()">Load Values</button>
    </form>

当我单击提交时，填充的值以formData对象https://developer.mozilla.org/en-US/docs/Web/API/FormData的形式发送
对于一些表单条目，我有默认值/占位符值，例如。对于电子邮件，我有默认值：[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)，当我提交表单时，这个默认值包含在formdata中。

我的问题是，有没有办法用现有的formData对象优雅地填充我的HTML？
我知道我可以使用一个脚本来填充表单，就像我在这里已经做的那样：

<script>
        function setFormValues() {
            const urlParams = new URLSearchParams(window.location.search);
            const key = urlParams.get("key");
            if (key) {
                document.getElementById("name").value = key;
            }
        }

        window.onload = setFormValues;
    </script>

但是我的表单将有15个左右的字段，手动设置每个字段似乎很乏味，通过循环设置它们似乎不优雅。
理想情况下，我只想“加载一个现有的formData对象”，它会自动放置所有默认值/占位符。然后用户可以根据自己的喜好修改字段，当他们单击send时，修改后的formData将发送到目的地。
我的完整代码在这里：https://github.com/charelF/wg-form-page/blob/main/public/form.html