1. 新增表单组件默认为带有一个输入框的表单组件,通过 “组件设置” -> "增加表单选项" 来新增更多表单项,如图:
![](https://box.kancloud.cn/7418f4ffaeb391bef5087b5194412d3f_345x447.png)
2. 新增的表单项默认为输入框类型,通过 "基本设置" -> "名称" -> "类型切换" 来切换为不同类型的表单项,如图:
![](https://box.kancloud.cn/c466c2c8fe36b693d680160dfeaeb514_358x467.png)
3. "基本设置" -> "参数属性" -> "参数名称" 中设置该表单项的传参键名,如图:
![](https://box.kancloud.cn/8cd9624fe0e37afdca78f573eea1f77e_347x418.png)
4. 对于单选框、复选框、下拉框类型的表单选项,通过 "基本设置" -> "子选项" 来配置每个子选项的特性,如图示,其中"选项1" 对应该子选项展示的名称,而"属性值"则对应该子选项对应的传参数值,请确保每个子选项的属性值不一致,在复选框中选中多个子选项,传参时各子选项的值以逗号拼接成字符串。
![](https://box.kancloud.cn/f0d605973a771a312ad1e9036124f289_344x715.png)
5. "基本设置" -> "删除当前",删除当前选中的表单项,如图示:
![](https://box.kancloud.cn/5587840ee9f83cb2f7c93f30e1db0b3c_344x391.png)
6. 对于后端接口来说,请确保接口返回数据格式如下(**用于提示表单提交成功或失败**):
```
{
Code: 200, //成功状态码
data: {}, //返回数据
Message: '提示信息' //提示信息
}
```
7. 由于是跨域提交,所以请确保接口支持[跨域](https://segmentfault.com/a/1190000011145364)。
注意: 由于表单组件需要调用到后端接口以及传参相关,纯运营同学在使用时通常会感觉吃力,所以在使用表单组件时需要找开发同学协助来配置。
---
*举例:*
>表单请求地址:http://www.mpages.cn
请求方式:post
额外参数:name=1;age=18 (**额外参数请用英文分号分割**)
如图:
![](https://box.kancloud.cn/3d85af69ce29f9123206040be09b0d7b_342x528.png)
**假设该表单包含一个输入框和一个多选框,并配置如下:**
输入框:
参数属性:height
多选框:
参数属性:weight
选项1:100 ; 属性值:一百
选项2:150 ; 属性值:一百五```
选项2:150 ; 属性值:一百五
选项3:200 ; 属性值:二百
如果用户在输入框中输入180,多选框勾选选项1,选项2并点击确定按钮提交后台,接口参数则为:
```
data = {
name: 1,
age: 18,
height: 180,
weight: '一百,一百五'
}
```