# form

## 用法

```html
<html>

<head>
	<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>

<body>
	<script src="/bricks/bricks.js"></script>
	<script>
		const opts =
		{
			"widget": {
				"widgettype": "VBox",
				"options": { "height": "100%" },
				"subwidgets": [
					{
						"widgettype": "HBox",
						"options": { "height": "auto" },
						"subwidgets": [
							{
								"widgettype": "Text",
								"options": {
									"otext": "Please change Font size",
									"i18n": true
								}
							},
							{
								"widgettype": "Button",
								"options": {
									"label": "A",
									"width": "auto",
									"item_rate": 1.4
								},
								"binds": [
									{
										"wid": "self",
										"event": "click",
										"actiontype": "script",
										"target": "app",
										"script": "bricks_app.textsize_bigger()"
									}
								]
							},
							{
								"widgettype": "Button",
								"options": {
									"label": "A",
									"width": "auto",
									"item_rate": 0.8
								},
								"binds": [
									{
										"wid": "self",
										"event": "click",
										"actiontype": "script",
										"target": "app",
										"script": "bricks_app.textsize_smaller()"
									}
								]
							}
						]
					},
					{
						"widgettype": "Form",
						"options": {
							"submit_url": "/ttt/ttt.dspy",
							"title": "Test hahah  Form",
							"description": "test input implemented",
							"fields": [
								{
									"uitype": "email",
									"name": "email",
									"label": "Email",
									'required': true
								},
								{
									"uitype": "tel",
									"name": "tel",
									"pattern": "{\d}3-{\d}4-{\d}4",
									"label": "Tel",
									'required': true
								},
								{
									"uitype": "file",
									"name": "file",
									"label": "File",
									'required': true
								},
								{
									"uitype": "str",
									"minlength": 3,
									"length": 30,
									"value": "tlegre",
									"name": "name",
									"label": "Name",
									'required': true
								},
								{
									"uitype": "int",
									"minlength": 3,
									"length": 30,
									"value": 12432,
									"name": "integer",
									"label": "Integer",
									'required': true
								},
								{
									"uitype": "float",
									"dec_length": 3,
									"length": 25,
									"name": "float",
									"label": "Float"
								},
								{
									"uitype": "date",
									"name": "date",
									"label": "Date",
									'required': true
								},
								{
									"uitype": "password",
									"minlength": 3,
									"length": 30,
									"name": "password",
									"label": "Password",
									'required': true
								},
								{
									"uitype": "checkbox",
									"name": "checkbox",
									"label": "CheckBox",
									"value": 2,
									"dataurl": "test_code.json",
									'required': true
								},
								{
									"uitype": "audio",
									"name": "audio",
									"label": "Audio",
									'required': true
								},
								{
									"uitype": "code",
									"name": "code",
									"label": "Code",
									"value": 2,
									"dataurl": "test_code.json",
									'required': true
								},
								{
									"uitype": "text",
									"name": "text",
									"value": "This is a test",
									"label": "Text",
									'required': true
								}
							]
						}
					}
				]
			}
		}

			;
		const app = new BricksApp(opts);
		app.run();
	</script>
</body>

</html>
```

## 效果图

![](F:\mh\bricks\docs\images\form.png)

## widget参数说明

| 参数       | 参数说明                      | 类型   | 是否必填 | 可选值    | 默认值           |
| ---------- | ----------------------------- | ------ | -------- | --------- | ---------------- |
| widgettype | 控件类型                      | String | 是       | Vbox/Hbox | ---              |
| options    | 当前控件的配置项              | Object | 是       | height    | 100%/auto/scroll |
| id         | 控件的唯一标识                | String | 否       | ---       | ----             |
| subwidgets | 表单里的内容,比如表单里的子项 | Object | 否       | ---       | ---              |
| binds      | 绑定的事件                    | Object | 否       | ---       | ---              |

**注意:**

**如果没有widget.subwidgets参数的话,表单是一个框架,没有子级,但是还可已继续添加事件**

### widgent.subeidgets参数说明

| 参数       | 参数说明                              | 类型   | 是否必填 | 可选值    | 默认值           |
| ---------- | ------------------------------------- | ------ | -------- | --------- | ---------------- |
| widgettype | 控件类型                              | String | 是       | Vbox/Hbox | ---              |
| options    | 当前控件的配置项                      | Object | 是       | height    | 100%/auto/scroll |
| subwidgets | 表单里的内容的配置项,比如表单里的子项 | Object | 否       | ----      | ---              |

**注意:此处widgettype的值不一样,options的配置项也不相同**

#### widgettype值为Hbox时,相关配置项的参数说明

##### options参数说明

| 参数    | 参数说明         | 类型   | 是否必填 | 可选值           | 默认值 |
| ------- | ---------------- | ------ | -------- | ---------------- | ------ |
| options | 表单子项的配置项 | object | 是       | {"heigt":"auto"} | ---    |

##### subwidgets配置项参数说明

**注意:subwidgets.widgettype的值不一样,相对的options的参数也不相同**

* widgettype值为"Text"时,options参数说明

  | 参数  | 参数说明       | 类型    | 是否必填 | 可选值     | 默认值 |
  | ----- | -------------- | ------- | -------- | ---------- | ------ |
  | otext | 默认显示的文字 | String  | 否       | ---        | ---    |
  | i18n  | 是否国家化     | Boolean | 否       | true/false | ---    |

* widgettype值为"Button"时,options参数说明

  | 参数      | 参数说明       | 类型   | 是否必填 | 可选值    | 默认值 |
  | --------- | -------------- | ------ | -------- | --------- | ------ |
  | label     | 表单子项的标题 | String | 否       | ---       | ---    |
  | width     | 表单子项的宽度 | String | 否       | auto/100% | ---    |
  | item_rate | 字体的大小     | number | 否       | ---       | ---    |

* binds事件参数说明

  | 参数       | 参数说明             | 类型   | 是否必填 | 可选值 | 默认值 |
  | ---------- | -------------------- | ------ | -------- | ------ | ------ |
  | wid        | 当前节点的唯一标识   | String | 是       | self   | ---    |
  | event      | 事件的类型           | String | 是       | click  | ---    |
  | actiontype | 事件的执行方式       | String | 是       | script | ---    |
  | target     | 事件在哪个载体执行   | String | 是       | ---    | ---    |
  | script     | 事件通过哪个方法执行 | String | 是       | ---    | ---    |

  

#### widgettype值为Form时,相关配置项的参数说明

##### options参数说明

| 参数        | 参数说明                 | 类型   | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------------ | ------ | -------- | ------ | ------ |
| submit_url  | 接口地址                 | String | 是       | ---    | ---    |
| title       | 标题                     | String | 否       | ---    | ---    |
| description | 描述                     | String | 否       | ---    | ---    |
| fields      | 表单的子项的具体配置内容 | Array  | 否       | ---    | ---    |

###### options.fieds参数说明

**注意:options.fieds内,每一项的uitype值不一样,其配置项也不同**

* uitype为email时的参数配置(**注意:email为邮件格式**)

  | 参数     | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型         | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required | 是否必须               | Boolean | 是       | true/false | ---    |

* uitype为tel时的参数配置(**注意:tel为手机号格式**)

  | 参数     | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型         | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | pattern  | 当前项的正则校验       | String  | 否       | ---        | ---    |
  | label    | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required | 是否必须               | Boolean | 是       | true/false | ---    |

* uitype为file时的参数配置(**注意:file为上传文件格式**)

  | 参数     | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型         | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required | 是否必须               | Boolean | 是       | true/false | ---    |

* uitype为str时的参数配置(**注意:str为文字格式**)

  | 参数      | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | --------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype    | 表单子项的类型         | String  | 是       | ---        | ---    |
  | minlength | 当前值的最少字符数量   | number  | 否       | ---        | ---    |
  | length    | 当前值的最大字符数量   | number  | 否       | ---        | ---    |
  | value     | 当前子项默认显示的值   | String  | 否       | ---        | ---    |
  | name      | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label     | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required  | 是否必须               | Boolean | 是       | true/false | ---    |

+ uitype为int时的参数配置(**注意:int为数字格式**)

  **注意:uitype为int时,数值可以点击增加或者减少,且只能填入数字)**

  | 参数      | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | --------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype    | 表单子项的类型         | String  | 是       | ---        | ---    |
  | minlength | 当前值的最少字符数量   | number  | 否       | ---        | ---    |
  | length    | 当前值的最大字符数量   | number  | 否       | ---        | ---    |
  | value     | 当前子项默认显示的值   | String  | 否       | ---        | ---    |
  | name      | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label     | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required  | 是否必须               | Boolean | 是       | true/false | ---    |

+ uitype为float时的参数配置(**注意:float为浮点数字格式**)

  | 参数       | 参数说明                   | 类型    | 是否必填 | 可选值     | 默认值 |
  | ---------- | -------------------------- | ------- | -------- | ---------- | ------ |
  | uitype     | 表单子项的类型             | String  | 是       | ---        | ---    |
  | dec_length | 当前值能显示的最少浮点位数 | number  | 否       | ---        | ---    |
  | length     | 当前值能显示的最多浮点位数 | number  | 否       | ---        | ---    |
  | name       | 表单子项的原生name属性     | String  | 是       | ---        | ---    |
  | label      | 当前子项的标签文本         | String  | 否       | ---        | ---    |
  | required   | 是否必须                   | Boolean | 是       | true/false | ---    |

+ uitype为date时的参数配置(**注意:data为时间格式**)

  **注意:此项可以填写时间,也可以选择时间**

  | 参数     | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型         | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required | 是否必须               | Boolean | 是       | true/false | ---    |

* uitype为password时的参数配置(**注意:password为密码格式**)

  | 参数      | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | --------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype    | 表单子项的类型         | String  | 是       | ---        | ---    |
  | minlength | 当前值的最少字符数量   | number  | 否       | ---        | ---    |
  | length    | 当前值的最大字符数量   | number  | 否       | ---        | ---    |
  | name      | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label     | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required  | 是否必须               | Boolean | 是       | true/false | ---    |

* uitype为chexkbox时的参数配置(**注意:chexkbox为复选格式**)

  | 参数     | 参数说明                                    | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ------------------------------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型                              | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性                      | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本                          | String  | 否       | ---        | ---    |
  | required | 是否必须                                    | Boolean | 是       | true/false | ---    |
  | value    | 当前子项默认显示的值                        | number  | 否       | ---        | ---    |
  | dataurl  | 当前项的值的来源,接口地址或者是JSON文件地址 | String  | 是       | ---        | ---    |

* uitype为code时的参数配置(**注意:code为下拉选择格式**)

  | 参数     | 参数说明                                    | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ------------------------------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型                              | String  | 是       | ---        | ---    |
  | name     | 表单子项的原生name属性                      | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本                          | String  | 否       | ---        | ---    |
  | required | 是否必须                                    | Boolean | 是       | true/false | ---    |
  | value    | 当前子项默认显示的值                        | number  | 否       | ---        | ---    |
  | dataurl  | 当前项的值的来源,接口地址或者是JSON文件地址 | String  | 是       | ---        | ---    |

* uitype为text时的参数配置(**注意:text为文本框格式**)

  | 参数     | 参数说明               | 类型    | 是否必填 | 可选值     | 默认值 |
  | -------- | ---------------------- | ------- | -------- | ---------- | ------ |
  | uitype   | 表单子项的类型         | String  | 是       | ---        | ---    |
  | value    | 当前子项默认显示的值   | String  | 否       | ---        | ---    |
  | name     | 表单子项的原生name属性 | String  | 是       | ---        | ---    |
  | label    | 当前子项的标签文本     | String  | 否       | ---        | ---    |
  | required | 是否必须               | Boolean | 是       | true/false | ---    |
