使用 Dform 和 jQuery 动态创建表单

如果您曾经使用过 Google 表单，您可能想知道它是如何工作的。最终用户如何动态创建表单。如果您曾想过这些问题，那么本文可以帮助您。

先决条件：

• HTML 和 CSS 基础
• 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 格式在函数中发送。以下是一些类型分类器：

Type	JSON Format	Description
text	{“type” : “text”}	Creates a text input field
number	{“type” : “number”}	Creates an HTML 5 number input field
password	{“type” : “password”}	Creates a password input field
container	{“type” : “container”} {“type” : “div”}	Creates a container
hidden	{“type” : “hidden”}	Creates a hidden input element
file	{“type” : “file”}	Create a file upload field
radio button	{“type” : “radio”}	Creates a radio button
multiple radio buttons	{“type” : “radiobuttons”}	Creates a group of radiobuttons. (Used with option attributes in JSON)
checkbox	{“type” : “checkbox”}	Creates a checkbox
checkboxes	{“type” : “checkboxes”}	Creates a group of checkboxes. (Used with option attributes in JSON)
url	{“type” : “url”}	Creates an HTML 5 url input field
tel	{“type” : “tel”}	Creates an HTML 5 phone number input field
email	{“type” : “email”}	Creates an HTML 5 email input field
reset	{“type” : “reset”}	Creates a reset button input element
submit	{“type” : “submit”}	Creates a submit button input element.

示例：以下是展示如何使用它的基本示例。

HTML

  

    
    
    
      
    
    
    
  
    
        $(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. [e-mail]"
                    },
                    { "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();
            });
        });
    
    
        
        
        
        
    
    

  

输出：

点击按钮前：

页面加载时

单击第一个按钮后：

单击第一个按钮后

单击第二个按钮后：

单击第二个按钮后