# 动态表单

**Repository Path**: Minjie_X/dynamic-form-generation-tool

## Basic Information

- **Project Name**: 动态表单
- **Description**: 满足基本的input，radio，file等样式，可以实现动态表单的创建
- **Primary Language**: JavaScript
- **License**: 0BSD
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2022-07-20
- **Last Updated**: 2025-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 动态表单生成工具

#### 介绍
满足基本的input，radio，file，select等样式，支持移动端动态表单的创建。

#### 软件架构
软件架构说明

分为form_list（表单列表）、form（表单）、result（提交成功）三个页面


#### 安装教程

大部分代码都是基于原生js（请求借用了jQuery的ajax），打开即用

#### 使用说明

1. 表单列表为本工具的首页

2. 进入表单需要从表单列表页跳转，表单列表点入表单时将表单的title传入，表单根据title请求到对于title表单的数据。

3. 表单样式介绍

   | 标题       | 属性           | 描述                         |
   | ---------- | ------------ | ---------------------------- |
   | 基本输入框 | BasicInput      | 如姓名、电话、等基本的输入框 |
   | 下拉单选框 | Select        | 满足多个数据的单选需求 |
   | 文本输入框 | TextArea | 多行文本的输入框 |
   | 文件上传域 | FileInput | 实现单文件、多文件的选择 |
   | 单选按钮 | RadioInput | 如果所有选项不超出一个输入框可以显示完，可以选择单选按钮。 |
   | 图像上传域 | ImageInput | 实现单图片、多图片的选择                                   |

   

   

4. 接口规范

后端只需要按以下规则将表单数据传给前端，即可动态创建表单。

1.form_list，向后端请求获取表单列表

| 参数  | 类型   | 描述                         |
| ----- | ------ | ---------------------------- |
| title | string | 表单标题（页面的title）      |
| name  | string | 表单名称（向后端请求的参数） |

> 可以改为一个参数并用

2.form，根据表单名称进行向后端请求数据

| 参数        | 类型    | 描述                         |
| ----------- | ------- | ---------------------------- |
| formType    | string  | 表单属性（表单样式的属性名） |
| label       | string  | 标签                         |
| attribute   | string  | 字段属性名                   |
| placeholder | string  | 提示信息                     |
| selectArr | Array| select框的数据                  |
| maxNum     |    number   |文件和图片最大数量                 |
| isRequired  | Boolean | 是否为必填项                 |

 

> 当然，为了方便起见，在js文件夹里，提供了两套json数据，只需要将请求的url改成json数据的地址即可。可参照这里的数据格式

#### 示例

![example](./images/example.jpg)

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request