如何制作HTML在线表单生成器_HTML在线表单生成器制作与动态表单实现

<div class="builder">
  <div class="field-palette">
    <button data-type="text">文本输入</button>
    <button data-type="email">邮箱输入</button>
    <button data-type="select">下拉选择</button>
  </div>
  <div class="form-canvas" id="canvas"></div>
  <textarea id="html-output" readonly></textarea>
</div>

document.querySelectorAll('.field-palette button').forEach(btn => {
  btn.addEventListener('click', function() {
    const type = this.getAttribute('data-type');
    const fieldId = 'field_' + Date.now();
    const container = document.createElement('div');
    container.dataset.field = fieldId;

    let fieldHtml;
    switch(type) {
      case 'text':
        fieldHtml = `
          <label contenteditable="true">输入标签</label>
          <input type="text" placeholder="请输入内容" />
          <button onclick="removeField('${fieldId}')">删除</button>
        `;
        break;
      case 'email':
        fieldHtml = `
          <label contenteditable="true">邮箱地址</label>
          <input type="email" placeholder="请输入邮箱" />
          <button onclick="removeField('${fieldId}')">删除</button>
        `;
        break;
      // 可继续扩展其他类型
    }
    container.innerHTML = fieldHtml;
    document.getElementById('canvas').appendChild(container);
    updateHtmlOutput();
  });
});

function updateHtmlOutput() {
  const canvas = document.getElementById('canvas');
  const html = canvas.innerHTML
    .replace(/<button onclick="removeField\('\w+'\')">删除<\/button>/g, '')
    .trim();
  document.getElementById('html-output').value = html;
}

new Sortable(document.getElementById('canvas'), {
  animation: 150,
  onEnd: updateHtmlOutput
});