如果您曾经使用过 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 |
{“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
输出:
点击按钮前:
单击第一个按钮后:
单击第二个按钮后: