如何用JavaScript从任意嵌套JS对象生成父子结构HTML表单

需求：通过JavaScript代码从任意随机嵌套的JS对象动态生成HTML表单，采用fieldset嵌套的父子层级结构，不使用HTML表格，也不依赖在线转换工具。

示例嵌套对象 #

{
  "name":"Ram",
  "age":27,
  "vehicles": {
    "car":"limousine",
    "bike":"ktm-duke",
    "airlines":{
      "lufthansa" : "Air123",
      "British airways" : "Brt707"
    }
  }
}

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>嵌套表单生成示例</title>
  <style type="text/css">
    fieldset {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
    }
    fieldset fieldset {
      width: 45%;
      float: left;
      margin-right: 10px;
    }
    p {
      margin: 8px 0;
    }
    label {
      display: inline-block;
      width: 120px;
      margin-right: 8px;
      text-align: right;
    }
    input {
      padding: 4px;
      width: 200px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
    #submit {
      margin: 15px 0;
      padding: 6px 15px;
      float: right;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form id="dynamicForm"></form>

  <script>
    // 示例嵌套数据对象
    const formData = {
      "name":"Ram",
      "age":27,
      "vehicles": {
        "car":"limousine",
        "bike":"ktm-duke",
        "airlines":{
          "lufthansa" : "Air123",
          "British airways" : "Brt707"
        }
      }
    };

    // 递归生成表单元素的核心函数
    function buildFormElements(parent, data) {
      for (const key in data) {
        if (!data.hasOwnProperty(key)) continue;
        
        const value = data[key];
        // 处理键名中的空格，避免DOM ID/name非法字符问题
        const safeKey = key.replace(/\s+/g, "_");

        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
          // 嵌套对象：生成fieldset容器
          const fieldset = document.createElement('fieldset');
          const legend = document.createElement('legend');
          legend.textContent = `-${key}`;
          fieldset.appendChild(legend);

          // 递归处理子对象
          buildFormElements(fieldset, value);

          // 添加清除浮动的容器，避免布局塌陷
          const clearfix = document.createElement('div');
          clearfix.className = 'clearfix';
          fieldset.appendChild(clearfix);

          parent.appendChild(fieldset);
        } else {
          // 基础数据类型：生成输入框+标签组合
          const p = document.createElement('p');
          
          const label = document.createElement('label');
          label.setAttribute('for', safeKey);
          label.textContent = `${key}:`;
          
          const input = document.createElement('input');
          // 根据值类型自动匹配输入框类型
          input.type = typeof value === 'number' ? 'number' : 'text';
          input.name = safeKey;
          input.id = safeKey;
          input.placeholder = String(value);

          p.appendChild(label);
          p.appendChild(input);
          parent.appendChild(p);
        }
      }
    }

    // 初始化生成表单
    const targetForm = document.getElementById('dynamicForm');
    buildFormElements(targetForm, formData);

    // 添加提交按钮
    const submitBtn = document.createElement('button');
    submitBtn.type = 'submit';
    submitBtn.id = 'submit';
    submitBtn.textContent = '提交表单';
    targetForm.appendChild(submitBtn);
  </script>
</body>
</html>

关键实现说明 #

1. 递归遍历逻辑：核心函数buildFormElements会遍历对象属性，遇到嵌套对象时生成fieldset并递归处理子结构，确保层级关系正确。
2. 键名安全处理：将键名中的空格替换为下划线，避免DOM元素ID/name包含非法字符导致的问题。
3. 输入类型适配：根据数据类型自动选择text或number输入框，提升表单交互合理性。
4. 布局优化：通过clearfix类解决嵌套fieldset浮动后的布局塌陷问题，同时调整基础样式提升表单美观度。

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