如何用js生成类似google form的动态表单？

就是可以让用户自己定义filed，输入名称，并且可以选择类型，比如：单选、多选、下拉列表等等，类似于google doc的form功能。求教各位高手，有具体代码更好。

解决方案 »

  1.   


    js可以生成，这个没有问题~·
    <html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <body >  
        
    <select id="sel">
         <option value="">--生成标签--</option>
            <option value="text">text</option>
            <option value="radio">radio</option>
            <option value="checkbox">checkbox</option>
            <option value="button">button</option>
        </select>
    <input type="button" value="生成标签" id="btn" /><br />
        <div id="neirong"></div>
        <script>
            document.getElementById('btn').onclick = function(){
    var sel = document.getElementById('sel');
    var value = sel[sel.selectedIndex].value;

    if(value){
    var input = document.createElement('input');
    input.type = value;
    document.getElementById('neirong').appendChild(input);
    }else{
    alert('请选择类型')
    }
    };
        </script>
            
            
        </body>
    </html>  
      

  2.   

    多些楼上！差不多就是这个功能了，另外能不能再请教一下，当我定制了几个比如说复选框的选项之后，如何重新把这些定制的选项，以复选框的组件形式显示出来呢？例如，我想添加一个叫车子的复选框组件，并且按照楼上的例子，添加了小轿车、卡车两个复选框，我现在想让它们以复选框的形式显示在页面上，应该怎么做？就好像google form，当定制好input type, name之后，可以通过一个新的链接，显示刚刚定制的内容。我不需要一个新的页面，就直接显示在同一个页面就行。
    我想可能是把这些定制的组件参数，比如类型、名称等传到一个模板，然后再生成。但是具体怎么样不是很清楚，请各位指点一下！
      

  3.   


    <html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <body >  
        
        <select id="sel">
            <option value="">--生成标签--</option>
            <option value="text">text</option>
            <option value="radio">radio</option>
            <option value="checkbox">checkbox</option>
            <option value="button">button</option>
        </select>
        复选框内容(多项用逗号，分割)：<input type="text" id="text" />
        <input type="button" value="生成标签" id="btn" /><br />
        <div id="neirong"></div>
        <script>
            document.getElementById('btn').onclick = function(){
                var sel = document.getElementById('sel');
                var value = sel[sel.selectedIndex].value;
                
                if(value){
    if(value == 'checkbox'){
    var v = document.getElementById('text').value.split(',' || '，');
    for(var i = 0; i < v.length; i++){
    var input = document.createElement('input');
    input.type = value;    
    document.getElementById('neirong').appendChild(input);
    document.getElementById('neirong').innerHTML += v[i];
    }

    }else{
    var input = document.createElement('input');
    input.type = value;    
    document.getElementById('neirong').appendChild(input);
    }
                }else{
                    alert('请选择类型')    
                }
            };
        </script>
            
            
        </body>
    </html>  楼上是这个意思吗~·
    你先选择checkbox然后在后面文本框里写小轿车，卡车~·然后点生成标签~·