使用Dform和jQuery动态地创建一个表单

如果你曾经使用过谷歌表格，你可能想知道它是如何工作的。终端用户如何动态地创建这些表格。如果这些问题曾经出现在你的脑海中，那么这篇文章可以帮助你。

我们在这里要使用的插件是dform。jQuery.dForm插件可以从JavaScript对象和JSON中生成HTML标记，用于HTML表单。

你能用dform插件做什么？

你自然可以用你自己的扩展和自定义类型生成JavaScript增强的标记。
你可以使用JSON和JavaScript，而不是HTML标记。
这是一种包含JQuery UI元素的简单方法。
从你的服务器端框架的业务对象中搭建起表单。
更多的细节，你可以参考这里。点击这里

如何使用这个插件？

创建一个空文件，命名为index.js，以便在我们的HTML文件中使用它。
点击这里并复制整个文本，将其粘贴到index.js中。
保存index.js。
该插件已可使用。

步骤:

我们将使用类型分类器来添加表单输入字段。
请看代码中的myFunction1和myFunction2，用于分类器及其属性。每一个属性都可以用同样的方式来使用。
分类器的类型。所有的类型分类器都以JSON格式在函数中发送。下面是一些类型分类器。

类型	JSON格式	描述
text	{“type” : “text”}	创建一个文本输入字段
number	{“type” : “number”}	创建一个HTML 5数字输入字段
password	{“type” : “password”}	创建一个密码输入字段
容器	{“type” : “容器”}{“type” : “div”}	创建一个 `<div>`容器
hidden	{“type” : “hidden”}	创建一个隐藏的输入元素
file	{“type” : “file” }	创建一个文件上传字段
Radiobutton	{“type” : “Radiobutton” }	创建一个单选按钮
radiobuttons	{“type” : “radiobuttons” }	创建一组单选按钮。(与JSON中的选项属性一起使用)
checkbox	{“type” : “checkbox”}	创建一个复选框
checkboxes	{“type” : “checkboxes” }	创建一个复选框组。(与JSON中的选项属性一起使用)
url	{“type” : “url”}	创建一个HTML 5网址输入字段
tel	{“type”：”tel”}。	创建一个HTML 5电话号码输入字段
email	{“type” : “email”}	创建一个HTML 5电子邮件输入字段
reset	{“type” : “reset”}	创建一个复位按钮的输入元素
submit	{“type” : “submit”}	创建一个提交按钮输入元素。

例子：这里是一个基本的例子，说明如何使用这个方法。

<!DOCTYPE html>
<html>
  
<body>
    <!-- Including jQuery -->
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
      
    <!-- Including index.js that we 
        had just created -->
    <script type="text/javascript" 
        src="index.js">
    </script>
  
    <script>
        (document).ready(function () {
  
            // Defining  myFunction1 
            .fn.myFunction1 = function () {
                ("#myform").dform({
                    "html": [{
                        // Other attributes
                        "name": "username",
                        "id": "txt-username",
                        "caption": "username",
          
                        // Type Classifier
                        "type": "text",
                        "placeholder": 
                        "E.g. user@example.com"
                    },
                    { "type": "br" }
                    ]
                });
            }
            (".call-btn-text").click(function () {
  
                // Calling myFunction1 on click 
                .fn.myFunction1();
            });
        });
  
        (document).ready(function () {
  
            // Defining  myFunction2 
            .fn.myFunction2 = function () {
                ("#myform").dform({
                    "html": [{
                        // Other attributes
                        "name": "PhoneNumber",
                        "id": "num_phone",
                        "caption": "Phone Number",
          
                        // Type Classifier
                        "type": "number",
                        "placeholder": "E.g. 0123456789"
                    },
                    { "type": "br" }
                    ]
                });
            }
            (".call-btn-number").click(function () {
  
                // Calling myFunction2 on click
                .fn.myFunction2();
            });
        });
    </script>
    <form>
        <input type="button" class="call-btn-text" 
            value=" Click me to input text">
        <br>
        <input type="button" value=
            "Click me to input number" 
            class="call-btn-number">
        <br>
    </form>
    <form id="myform"></form>
</body>
  
</html>