极客教程使用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电话号码输入字段 |
| {“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>
输出:
在点击按钮之前：
当页面加载时
点击第一个按钮后：
点击第一个按钮后
点击第二个按钮后：
点击第二个按钮后