📌  相关文章
📜  使用 Dform 和 jQuery 动态创建表单

📅  最后修改于: 2021-11-07 08:22:00             🧑  作者: Mango

如果您曾经使用过 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


  

    
    
      
    
    
  
    
    
                 
                 
    
    
  


输出:

点击按钮前:

页面加载时

单击第一个按钮后:

单击第一个按钮后

单击第二个按钮后:

单击第二个按钮后