## 功能描述 后臺的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> ```