欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

javascript习题专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成HTML表单的方法。通过解析数据结构，可以自动生成包括文本输入、密码输入、选择框、复选框及单选按钮等元素的表单。这种方法适用于快速构建用户输入界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据数据生成表单

<head>
    <meta charset="UTF-8">
    <title>生成表单</title>
    <script>
        window.onload = function() {
            //创建form 1）创建label
            var form = document.createElement("form");
            var arr = [{
                label: "用户名",
                name: "username",
                type: "text"
            }, {
                label: "密码",
                name: "password",
                type: "password"
            }, {
                label: "性别",
                name: "gender",
                type: "select",
                value: ['男', '女']
            }, {
                label: "爱好",
                name: "hobby",
                type: "checkbox",
                value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
            }, {
                label: '是否已婚',
                name: 'married',
                type: 'radio',
                value: ['已婚', '未婚']
            }];

            for(var i = 0; i < arr.length; i++) {
                var label = document.createElement("label");
                var p = document.createElement("p")
                label.innerHTML = arr[i].label + ":";

                if(arr[i].type == "text" || arr[i].type == "password") {

                    var input = document.createElement("input");
                    input.setAttribute("name", arr[i].name);
                    input.setAttribute("type", arr[i].type);
                    label.appendChild(input);

                }
                else if(arr[i].type == "select") {

                    var select = document.createElement("select");
                    var option = document.createElement("option");
                    var optio = document.createElement("option");

//
option.innerHTML = arr[i].value[0];
optio.innerHTML = arr[i].value[1];
//需要给下拉框一个value值
option.value=arr[i].value[0];
optio.value=arr[i].value[1];

                    select.appendChild(option);
                    select.appendChild(optio);
                    label.appendChild(select);

                }

                else if(arr[i].type == "checkbox" || arr[i].type == "radio") {
                    var check = arr[i].value;
                    for(var j = 0; j < check.length; j++) {
                        var input = document.createElement("input");
                        var span = document.createElement("span");
                        span.innerHTML = arr[i].value[j];
                        input.setAttribute("name", arr[i].name);
                            input.setAttribute("type", arr[i].type);
                        input.setAttribute("value", arr[i].value);
                        label.appendChild(span);
                        label.appendChild(input);

                    }
                }
                p.appendChild(label);
                form.appendChild(p);
                document.body.appendChild(form);


            }

        }
    </script>

</head>

<body>

</body>