如何将JavaScript生成的输入字段嵌入到HTML表单中

你当前使用的是React相关的渲染脚本，生成的所有元素都会挂载到#root节点下，可通过以下几种方式实现需求：

• 方案1：直接将#root节点包裹在表单标签内
  这是最简单的实现方式，动态生成的所有输入控件只要位于<form>标签内部，就会自动被识别为表单的一部分，修改后的body部分代码如下：

<body>
    <!-- 自定义表单属性，按需修改action、method、name等参数 -->
    <form id="customForm" action="/submit-url" method="POST">
        <div id="root"></div>
        <!-- 可按需添加原生提交按钮，也可由JS动态生成提交控件 -->
        <button type="submit">提交表单</button>
    </form>
    <div id="error-display"></div>
    <script type="text/javascript" src="http://yourjavascript.com/2560291117/preview-0c18dfe69fe4ef4a04bd-bundle.js"></script>
</body>

• 方案2：通过form属性关联表单（适用于输入节点不能放在form内部的场景）
  给表单设置唯一id，再给所有动态生成的输入字段添加form="表单id"属性，即可让不在form标签内的输入控件被表单识别，示例代码如下：

<!-- 表单放在任意位置 -->
<form id="customForm" action="/submit-url" method="POST">
    <button type="submit">提交表单</button>
</form>
<div id="root"></div>
<script>
window.addEventListener('load', () => {
  // 给所有动态生成的输入控件添加form关联属性
  const allInputs = document.querySelectorAll('#root input, #root select, #root textarea');
  allInputs.forEach(input => {
    input.setAttribute('form', 'customForm');
    // 额外补充：如果输入控件没有name属性，表单提交不会携带该值，可统一补充name
    if(!input.name) {
      // 可根据输入框的id、placeholder、类名等设置符合业务需求的name
      input.name = input.id || input.placeholder || `dynamic_field_${Date.now()}`;
    }
  })
})
</script>

• 方案3：手动收集值提交（适用于异步提交场景）
  如果不需要原生表单提交，可在提交时通过FormData直接收集所有动态生成字段的值：

document.querySelector('#submitBtn').addEventListener('click', () => {
  const formData = new FormData();
  const allInputs = document.querySelectorAll('#root input, #root select, #root textarea');
  allInputs.forEach(input => {
    const fieldName = input.name || input.id;
    if(fieldName) {
      formData.append(fieldName, input.value);
    }
  })
  // 此处可直接将formData作为参数发送异步请求
  fetch('/submit-url', {
    method: 'POST',
    body: formData
  })
})

注意：所有动态生成的输入字段必须设置name属性，否则原生表单提交时不会携带对应字段值，如果开源项目生成的控件没有name属性，可通过上述方案2中的补充代码统一添加。

内容的提问来源于stack exchange，提问作者xamcx