[TOC]
## 内置表单项
>` text`：单行文本框
> `password`：密码输入框
> `radio`：单选
>` checkbox`：多选
> `switch`：开关
> `select`：下拉选择
> `textara`：多行文本框
> `number`：h5-number 数字数字框
> `date`：日期选择
> `datetime`：日期时间选择
> `time`：时间选择
> `month`：年月选择
> `year`：年份选择
> `hidden`：隐藏域
> `color`：取色器
> `slider`：滑块
> `transfer`：穿梭框
> `rate`：评分
> `image`：单图上传
> `file`：单文件上传
> `multiple_image`：多图上传
> `multiple_file`：多文件上传
> `array`：数组
> `keyvalue`：键值对
> `tinymce` 富文本编辑器
> `xmselect`· 下拉多（单）选
> `tag` 标签
> `h5color`：h5-color 取色器
> `h5tel`：h5-tel
> `h5url`：h5-url
> `h5email`：h5-email
## 表单项通用属性
**属性选项**是指比如添加表单项等操作时可以设置的更多属性选项。
~~~
$form->addFormItem('字段名', 'text', [
'label' => '标题',
// 可以根据需求设置更多属性选项 ...
]);
~~~
~~~
$form['字段名'] = [
'elem' => 'text', // 指定表单类型 必须
'label' => '标题',
// 可以根据需求设置更多通用属性选项 ...
];
~~~
`field`：string，字段名 无需单独设置
`elem`：string，表单类型， 填写`内置表单项`中或自定义的表单项对应的类型名称
`label`：string，表单人类可识名称
`attrs`：array，注入到表单标签上的标签属性，比如class、data-xx实现一些自定义的数据传递（后文你会发现大量在attrs来赋予表单更多的能力） <span style="color:green">常用</span>
`options`：array，用于一些选项型表单项进行选项传递（如：radio/checkbox/select...）
`tip`：string，提示 ，默认无
`before`：function，解析前置回调，默认无
`after`：function，解析后缀回调 ，默认无
`fetch`：string，自定义表单项模板，一般不设置
`html`：string，自定义表单项html结构，一般不设置
## 项单项特殊用法
**下面的文档只是针对有可以通过属性的改变来控制表单项一些功能的进行说明，如果表单项没有特殊控制就不单独讲该表单项怎么使用了。**
### `text` 单行文本框
~~~
$form->addFormItem('字段名', 'text', [
'label' => '单行带选择',
'options' => [
'张三' => '张三',
'李四' => '李四',
'王五' => '王五',
// 也支持分组
//'人物' => [
// '张三' => '张三',
// '李四' => '李四',
// '王五' => '王五'
//],
//'动物' => [
// '旺财' => '旺财',
// '加菲猫' => '加菲猫',
// '熊大' => '熊大'
//]
]
]);
~~~
可以给`text`类型表单加`options`选项实现一些常用的输入内容以下拉的形式默认出来进行快捷输入。
~~~
$form->addFormItem('字段名', 'text', [
'label' => '字段名称',
'attrs' => [
'class' => 'myclass',
'placeholder' => '请输入XXX',
'lay-verify' => 'required',
'readonly' => true
// ...
]
]);
// 最终生成的input html标签结构：
// <input type="text" class="myclass layui-input form-item form-item-text form-item-field-字段名" placeholder="请输入XXX" lay-verify="required" readonly="1" name="字段名" id="id_字段名">
// 每个表单项的输入框（或主input标签）都有的类名，方便进行DOM查找和操作：
// form-item
// form-item-表单类型
// form-item-field-字段名
~~~
可以给`attrs`设置表单标签属性，比如class名等。来实现一些标签属性本身的功能和<span style="color:blue;">**传值**</span>，其他表单项都有`attrs`来设置html标签属性，后文的其他表单项非特殊业务就不单独说明了。
### `radio` 单选框
~~~
$form->addFormItem('c', 'radio', [
'label' => '性别',
//'is_title' => false,
'options' => [
'nan' => '男',
'nv' => '女',
'wz' => '未知'
]
]);
~~~
通过`options`传递选项列表，value => label
### `checkbox` 多选框
~~~
$form->addFormItem('d', 'checkbox', [
'label' => '爱好',
'options' => [
'lq' => '篮球',
'zq' => '足球',
'pq' => '排球'
],
'attrs' => [
'value' => ["lq","zq"]
]
]);
~~~
通过`options`传递选项列表，value => label
### `select` 下拉选择
~~~
$form->addFormItem('e', 'select', [
'label' => '年龄',
'tip '=> '请选择年龄',
'options' => [
'16' => '16岁',
'17' => '17岁',
'18' => '18岁'
],
'attrs' => [
'value' => '18'
]
]);
$form['f'] = [
'elem' => 'select',
'label' => '风格',
'options' => [
'纯文风格' => [
'1' => '简约',
'2' => '标题+简介'
],
'图文风格' => [
'3' => '图文1',
'4' => '图文2'
]
]
];
~~~
通过`options`传递选项列表，支持二维进行选项分组。
### `date`、`datetime`、`time`、`year`、`month`日期、日期时间、时间、年、月选择
~~~
$form->addFormItem('字段名', 'date', [
'label' => '日期时间',
]);
$form->addFormItem('字段名', 'datetime', [
'label' => '日期时间时间',
]);
$form->addFormItem('字段名', 'time', [
'label' => '时间选择',
]);
$form->addFormItem('字段名', 'month', [
'label' => '年月选择',
]);
$form->addFormItem('字段名', 'year', [
'label' => '年份选择',
]);
~~~
layui日期文档地址：https://www.layuion.com/doc/modules/laydate.html
`date`：日期选择 默认格式 `yyyy-MM-dd` 如 `2022-04-08`
`datetime`：日期时间选择 默认格式 `yyyy-MM-dd HH:mm:ss` 如 `2022-04-08 11:31:09`
`time`：时间选择 默认格式`HH:mm:ss` 如`11:31:09`
`year`：年份选择 默认格式`yyyy` 如 `2022`
`month`：年月选择 默认格式`yyyy-MM` 如 `2022-04`
可以通过`attrs`设置更多标签属性来实现更多需求功能：
~~~
$form->addFormItem('date', 'date', [
'label' => '日期',
'attrs' => [
'data-range' => '|', // 是否开启范围选择 true 默认是 ~ 用为2个日期段分隔符 也可以设定自定义分隔符 |
]
]);
~~~
```
'data-range' => '|', // 是否开启范围选择 true 默认是 ~ 用为2个日期段分隔符 也可以设定自定义分隔符 |
'data-format' => 'yyyy年MM月dd日' // 自定义格式 一般不需要 默认格式见上文
'data-close-preview' => true // 是否关闭预览 默认开启
'data-min' => '2022-03-01' // 设置可选最小值 值你自己看到办可以写死 也可以函数自动获取
'data-max' => date('Y-m-d') // 设置可选最大值
'data-hide-bottom' => true // 关闭底部区域 默认开启
'data-btns' => 'clear' // 自定义底部按钮 clear、now、confirm 多个,逗号分割
'data-theme' => 'molv' // 主题
'data-calendar' => true // 是否显示公历 默认不显示
'data-mark' => json_encode(['2022-04-01' => '测试', '2022-04-02' => '牛皮']) // 标注重要日子
'data-trigger' => 'click' // 触发事件名 默认 focus
'data-zindex' => 99 // zIndex 层级 默认 66666666
```
### `color` 取色器
可以通过`attrs`设置更多标签属性来实现更多需求功能：
```
'type' => 'hidden' // 不显示文本输入框
'data-format' => 'rgb', // 取值方式 rgb hex 默认hex
'data-alpha' => true, // 是否开启透明度 默认false没有开启
'data-predefine' => false,// 关闭预定义颜色 默认开启
```
### `slider` 滑块
可以通过`attrs`设置更多标签属性来实现更多需求功能：
```
'data-type' => 'vertical', // 滑块类型 default（水平滑块）、vertical（垂直滑块） 默认 default 水平
'data-min' => 1 // 滑动条最小值，正整数，默认为 0
'data-max' => 100 // 滑动条最大值 ，正整数，默认为 100
'data-step' => 1 // 拖动的步长 ，正整数，默认为 1
'data-range' => false // 是否开启滑块的范围拖拽，若设为 true，则滑块将出现两个可拖拽的环 默认false
'data-showstep' => false // 是否显示间断点 默认 false
'data-tips' => false // 是否显示文字提示 默认 false
'data-input' => false // 是否显示输入框（注意：若 range 参数为 true 则强制无效） 默认 false
'data-height' => 200 // 滑动条高度，需配合 type:"vertical" 参数使用 默认 200
'data-disabled' => true // 是否将滑块禁用拖拽 默认 false
'data-theme' => '#009688' // 主题颜色 默认 '#009688'
```
### `transfer` 穿梭框
~~~
$form->addFormItem('transfer', 'transfer', [
'label' => '穿梭框',
'attrs' => [
// 'data-width' => 150, //自定义宽度 默认190，
// 'data-height' => 300,//自定义高度 默认 300
// 'data-title' => '数据源,已选中' // 自定义2边标题
// 'data-search' => false, // 关闭搜索 默认开启
],
'options' => [
['value' => '1','title' => '张三'],
['value' => '2','title' => '李四'],
['value' => '3','title' => '王五'],
['value' => '4','title' => '赵六'],
['value' => '5','title' => '老师']
]
]);
~~~
通过`options`传递选项列表，看清楚格式。
可以通过`attrs`设置更多标签属性来实现更多需求功能：
```
'data-width' => 150, //自定义宽度 默认190，
'data-height' => 300,//自定义高度 默认 300
'data-title' => '数据源,已选中' // 自定义2边标题
'data-search' => false, // 关闭搜索 默认开启
```
### `rate` 评分
可以通过`attrs`设置更多标签属性来实现更多需求功能：
```
'data-length' => 10, //设定星星的数量 默认5个
'data-half' => true, //是否允许点半个星星 默认false
'data-text' => true, //是否提示星星现在个数的文本 默认false
'data-theme' => '#FFB800' //星星选中以后的颜色 默认#FFB800
'data-readonly' => true //是否自读 默认false
```
### `image`、`multiple_image`、`file`、`multiple_file`单图、多图、单文件、多文件上传
~~~
$form->addFormItem('image', 'image', [
'label' => '单图',
'attrs' => [
//'data-url' => '' // 自定义上传接口 默认 upload/upload
'data-data' => ['a' => '测试'], // 每次上传请求的额外数据
'data-auto' => false, // 是否自动上传 默认true
]
]);
~~~
可以通过`attrs`设置更多标签属性来实现更多需求功能：
~~~
'data-url' => '' // 特殊情况用来自定义上传接口地址 默认 upload/upload
'data-data' => ['a' => '测试'], // 每次上传请求的额外数据
'data-auto' => false, // 是否自动上传 选择完文件就马上自动生成 默认true；如果为false 就会多一个上传按钮，你需要点击上传
'data-exts' => 'jpg|png|gifp|bmp|jpeg|web', //允许上传的后缀名，多个|竖线分隔
// 图片默认：jpg|png|gifp|bmp|jpeg|web 后期会改为后台系统设置中修改
// 文件默认：doc|docx|xls|xlsx|ppt|pptx|pdf|wps|txt|rar|zip|jpg|png|gif|jpeg|webp|mp4 后期会改为后台系统设置中修改
'data-drag' => false // 是否允许拖拽上传 默认true
'data-number' => 5 // 多图、多文件时允许一次最多上传的数量 默认 5
'data-size' => 2048 // 单文件最大容量 单位KB 默认2048 以后改为可后台设置 当然你设置了会把默认的覆盖掉
~~~
### `xmselect` 下拉单多选
~~~
$form->addFormItem('xmselect', 'xmselect', [
'label' => '更多下拉',
'options' => [
'16' => '16岁',
'17' => '17岁',
'18' => '18岁',
'19' => '19岁',
'20' => '20岁',
'21' => '21岁',
'22' => '22岁',
'23' => '23岁'
],
'attrs' => [
'value' => '18',
'xm-select-max' => 3,// 最多选择3个
//'xm-select-radio' => true, // 下拉单选
]
]);
~~~
通过`options`传递选项列表，value => label
可以通过`attrs`设置更多标签属性来实现更多需求功能：
```
'xm-select-max' => 3,// 多选时 最多选择多少个
'xm-select-radio' => true, // 是否单选 默认多选
```