表单组件 form fastadmin（生成表单元素）

您所在的位置：网站首页 › fastadmin框架如何设置手机页面 › 表单组件 form fastadmin（生成表单元素）

表单组件 form fastadmin（生成表单元素）

2024-05-21 20:21| 来源: 网络整理| 查看: 265

Form组件

定义文件位置：

/extend/fast/Formphp

通用参数

$name 通常为我们组件的名称（name属性值），我们在后台接收时可以通过这个名称来获取到它所对应的值 $value 通常为我们数据库中的值（元素value值），在新增的时候通常为空，在修改的时候通常需要是数据库中对应字段的值 $options 组件的扩展属性，通常为一一键值匹配并最终渲染在组件的属性中，通常我们使用的有data-rule/disabled/readonly/multiple等等，也常用于自定义组件属性。

前端展示：

方法1 php输出：

//必须namespace fast\Form; echo Form::text('id',123456789,[]);

form组件列表：

//生成Token Form::token() //Label标签 Form::label(string $name, string $value = null, array $options = []) //按类型生成文本框 Form::input($type, $name, string $value = null, array $options = []) //普通文本框 Form::text(string $name, string $value = null, array $options = []) //密码文本框 Form::password(string $name, array $options = []) //隐藏文本框 Form::hidden(string $name, string $value = null, array $options = []) //Email文本框 Form::email(string $name, string $value = null, array $options = []) //URL文本框 Form::url(string $name, string $value = null, array $options = []) //文件组件 Form::file(string $name, array $options = []) //多行文本框 Form::textarea(string $name, string $value = null, array $options = []) //富文本编辑器 Form::editor(string $name, string $value = null, array $options = []) //下拉列表组件 Form::select(string $name, array $list = [], string $selected = null, array $options = []) //下拉列表组件(多选) Form::selects(string $name, array $list = [], string $selected = null, array $options = []) //下拉列表组件(友好) Form::selectpicker(string $name, array $list = [], string $selected = null, array $options = []) //下拉列表组件(友好)(多选) Form::selectpickers(string $name, array $list = [], string $selected = null, array $options = []) //动态下拉列表组件 Form::selectpage(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = []) //动态下拉列表组件(多选) Form::selectpages(string $name, string $value, string $url, string $field = null, string $primaryKey = null, array $options = []) //城市选择组件 Form::citypicker(string $name, string $value, array $options = []) //开关组件 Form::switcher(string $name, string $value, array $options = []) //日期选择组件 Form::datepicker(string $name, string $value, array $options = []) //时间选择组件 Form::timepicker(string $name, string $value, array $options = []) //日期时间选择组件 Form::datetimepicker(string $name, string $value, array $options = []) //日期区间组件 Form::daterange(string $name, string $value, array $options = []) //时间区间组件 Form::timerange(string $name, string $value, array $options = []) //日期时间区间组件 Form::datetimerange(string $name, string $value, array $options = []) //字段列表组件 Form::fieldlist(string $name, string $value, string $title = null, string $template = null, array $options = []) //联动组件 Form::cxselect(string $url, array $names = [], array $values = [], array $options = []) //选择数字区间 Form::selectRange(string $name, string $begin, string $end, string $selected = null, array $options = []) //选择年 Form::selectYear(string $name, string $begin, string $end, string $selected = null, array $options = []) //选择月 Form::selectMonth(string $name, string $selected = null, array $options = [], string $format = '%m') //单个复选框 Form::checkbox(string $name, string $value = '1', string $checked = null, array $options = []) //一组复选框 Form::checkboxs(string $name, array $list = [], string $checked = null, array $options = []) //单个单选框 Form::radio(string $name, string $value = null, string $checked = null, array $options = [])) //一组单选框 Form::radios(string $name, array $list = [], string $checked = null, array $options = [])) //上传图片组件 Form::image(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) //上传图片组件(多图)） Form::images(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) //上传文件组件 Form::upload(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) //上传文件组件(多文件)） Form::uploads(string $name = null, string $value, array $inputAttr = [], array $uploadAttr = [], array $chooseAttr = [], array $previewAttr = []) //表单button Form::button(string $value = null, array $options = []) View Code

方法2 模板输出：

{:Form::text('row[text]', '', ['data-rule'=>'required'])}

注意：form组件必须要依赖js的Form.api.bindevent("form[role=form]");进行组件初始化，否则部分组件会不生效

所以引用了这些代码的话就必须在相应的js里加上这段代码（它包含了几乎所以的表单事件）

{:__('文本框')}: {:Form::text('row[text]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('多行文本框')}: {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('富文本编辑器')}: {:Form::editor('row[editor]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('单选')}: {:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('复选')}: {:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('下拉列表')}: {:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('下拉列表(多选)')}: {:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('下拉列表(友好)')}: {:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('下拉列表(友好)(多选)')}: {:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('动态下拉列表')}: {:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('日期')}: {:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('时间')}: {:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('日期时间')}: {:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('日期区间')}: {:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('时间区间')}: {:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('日期时间区间')}: {:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('动态字段列表')}: {:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('单图')}: {:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])}

或者：

头像: 上传选择

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('多图')}: {:Form::images('row[images]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('单文件')}: {:Form::upload('row[upload]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('多文件')}: {:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('开关')}: {:Form::switcher('row[switcher1]', '0', ['color'=>'success'])} {:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])} {:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])} {:Form::switcher('row[switcher4]', '1', ['color'=>'info'])} {:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('联动选择')}: {:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}

---------------------------------------------------------------------------------------------------------------------------------------------

{:__('Submit')} {:__('Reset')}

除了上面的表单组件可以快速生成表单元素，还有其他快速生成的方式：

如:图片上传：

头像: 上传选择 //无需表单事件？ View Code

【本文地址】

表单组件 form fastadmin（生成表单元素）

表单组件 form fastadmin（生成表单元素）

今日新闻

推荐新闻