表单生成 · yzncms2.0使用手册

## 功能描述后台的HTML的表单组件代码，会有许多不熟悉前端的小伙伴改动起来会比较费劲。其实在YznCMS中有一个的`FormBuilder`类库，能使用php一句话代码生成一些的文本框，下拉框，上传组件等等， ### 通用属性 | 属性名 | 描述 | | --- | --- |--| | `$name` | 通常为我们组件的名称，我们在后台接收时可以通过这个名称来获取到它所对应的值 | |`$value`|通常为我们数据库中的值，在新增的时候通常为空，在修改的时候通常需要是数据库中对应字段的值 | |`$options`|组件的扩展属性，通常为一一键值匹配并最终渲染在组件的属性中，通常我们使用的有`data-rule/disabled/readonly/multiple`等等，也常用于自定义组件属性。| ### 支持组件 ``` //创建一个表单标签元素 label($name, $value = null, $options = [], $escape_html = true) //创建一个表单输入字段 input($type, $name, $value = null, $options = []) //创建一个文本输入字段 text($name, $value = null, $options = []) //创建一个密码输入字段 password(string $name, array $options = []) //创建一个范围输入选择器 range($name, $value = null, $options = []) //创建一个隐藏的输入字段 hidden($name, $value = null, $options = []) //创建一个电子邮件输入字段 email($name, $value = null, $options = []) //创建一个tel输入字段 tel($name, $value = null, $options = []) //创建一个url输入字段 url($name, $value = null, $options = []) //创建一个textarea输入字段 textarea($name, $value = null, $options = []) //创建一个选择框字段 select($name,$list = [],$selected = null,array $selectAttributes = [],array $optionsAttributes = [],array $optgroupsAttributes = []) //创建一个按钮字段 button($value = null, $options = []) //创建单选按钮输入字段 radio($name, $value = null, $checked = null, $options = []) //创建一组单选框字段 radios($name, $list, $checked = null, $title = [], $options = []) //创建复选按钮字段 checkbox($name, $value = 1, $checked = null, $options = []) //创建一组复选按钮框字段 checkboxs($name, $list, $checked, $title = [], $options = []) //创建一个上传图片组件(单图)字段 image($name = null, $value = null, $inputAttr = [], $uploadAttr = [], $chooseAttr = [], $previewAttr = []) //创建一个上传图片组件(多图)字段 images($name = null, $value = null, $inputAttr = [], $uploadAttr = [], $chooseAttr = [], $previewAttr = []) //创建上传文件组件(单文件)字段 upload($name = null, $value = null, $inputAttr = [], $uploadAttr = [], $chooseAttr = [], $previewAttr = []) //创建上传文件组件(多文件)字段 uploads($name = null, $value = null, $inputAttr = [], $uploadAttr = [], $chooseAttr = [], $previewAttr = []) //创建颜色选择字段 color($name = null, $value = null, $options = []) //创建日期时间选择器字段 datetime($name = null, $value = null, $options = []) //创建百度富文本编辑器字段 ueditor($name, $value = null, $options = []) //创建动态下拉列表字段 selectpage($name, $value, $url, $field = null, $primaryKey = null, $options = []) //创建动态下拉列表(复选)字段 selectpages($name, $value, $url, $field = null, $primaryKey = null, $options = []) ``` ### 组件示例 > 以下为FormBuilder所支持的所有组件调用示例，你可以复制你所需要的组件到你的表单中，然后按需要修改名称或值即可 > 部分组件如选择框，单选框复选框等需要在layui表单中放置，样式才会生效，在普通页面生成是最原始的风格 ``` <form class="layui-form" method="post"> <div class="layui-form-item"> <label class="layui-form-label">文本框</label> <div class="layui-input-block"> {:Form::text('row[text]','',["lay-verify"=>"required"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">TAG标签</label> <div class="layui-input-block"> {:Form::text('row[tag]','',["class"=>"form-tags"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-block"> {:Form::password('row[password]',["lay-verify"=>"required"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多文本</label> <div class="layui-input-block"> {:Form::textarea('row[textarea]','',["lay-verify"=>"required"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> {:Form::radio('row[radio]','1',true,['title'=>"显示"])} {:Form::radio('row[radio]','0',false,['title'=>"隐藏"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框组</label> <div class="layui-input-block"> {:Form::radios('row[radios]',['aa'=>'AA', 'bb'=>'BB'], 'aa',['aa'=>'显示','bb'=>'隐藏'])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> {:Form::select('row[radios]',['aa'=>'AA', 'bb'=>'BB'], 'aa')} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-block"> {:Form::checkbox('row[checkbox]','1',true,['title'=>"显示"])} {:Form::checkbox('row[checkbox]','0',false,['title'=>"隐藏"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">复选框组</label> <div class="layui-input-block"> {:Form::checkboxs('row[checkboxs]',['aa'=>'AA', 'bb'=>'BB'], 'aa,bb',['aa'=>'显示','bb'=>'隐藏'])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单图片</label> <div class="layui-input-block"> {:Form::image("row[image]")} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多图片</label> <div class="layui-input-block"> {:Form::images("row[images]")} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单文件</label> <div class="layui-input-block"> {:Form::upload("row[upload]")} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多文件</label> <div class="layui-input-block"> {:Form::uploads("row[uploads]")} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">颜色框</label> <div class="layui-input-block"> {:Form::color("row[color]",'#ddd',['class'=>'layui-input'])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">日期框</label> <div class="layui-input-block"> {:Form::datetime("row[datetime]",'',['class'=>'layui-input','data-date-range'=>'-'])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">动态下拉</label> <div class="layui-input-block"> {:Form::selectpage("row[selectpage]",'','category/selectpage','name','id',["lay-verify"=>"required"])} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">动态下拉(多选)</label> <div class="layui-input-block"> {:Form::selectpages("row[selectpages]",'','category/selectpage','name','id',["lay-verify"=>"required"])} </div> </div> </form> ```