FormBuilder 是一个开源的php表单生成插件,可以快速生成现代化的form表单。还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件
FormBuilder 的安装非常简单,因为它是一个标准的 Composer 包,这意味着任何满足下列安装条件的 PHP 项目支持 Composer 都可以使用它。
- PHP >= 5.4
- IView
- ElementUI
- 内置17种常用的表单组件
- 支持表单验证
- 支持生成任何 Vue 组件
- 支持栅格布局
- 支持数组组件/组件嵌套
- 可以配合 form-create 生成更复杂的表单
- hidden
- input
- inputNumber
- checkbox
- radio
- switch
- select
- autoComplete
- cascader
- colorPicker
- datePicker
- timePicker
- rate
- slider
- upload
- tree
- frame
composer require xaboy/form-builder
各组件配置属性 点击查看
namespace \FormBuilder\Form
Form::cascader 三级联动,value为array类型
Form::city 省市二级联动,value为array类型
Form::cityArea 省市区三级联动,value为array类型
Form::checkbox 复选框
Form::color 颜色选择
Form::date 日期选择
Form::dateRange 日期区间选择,value为array类型
Form::dateTime 日期+时间选择
Form::dateTimeRange 日期+时间 区间选择,value为array类型
Form::year 年份选择
Form::month 月份选择
Form::frame frame组件
Form::frameInputs frame组件,input类型,value为array类型
Form::frameFiles frame组件,file类型,value为array类型
Form::frameImages frame组件,image类型,value为array类型
Form::frameInputOne frame组件,input类型,value为string|number类型
Form::frameFileOne frame组件,file类型,value为string|number类型
Form::frameImageOne frame组件,image类型,value为string|number类型
Form::hidden hidden组件
Form::number 数字输入框
Form::input input输入框,其他type: text类型Form::text
,password类型Form::password
,textarea类型Form::textarea
,url类型Form::url
,email类型Form::email
,date类型Form::idate
Form::radio 单选框
Form::rate 评分组件
Form::select select选择框
Form::selectMultiple select选择框,多选,value为array类型
Form::selectOne select选择框,单选
Form::slider 滑块组件
Form::sliderRange 滑块组件,区间选择,
Form::switches 开关组件
Form::timePicker
Form::time 时间选择组件
Form::timeRange 时间区间选择组件,value为array类型
Form::upload 上传组件
Form::uploadImages 多图上传组件,value为array类型
Form::uploadFiles 多文件上传组件,value为array类型
Form::uploadImageOne 单图上传组件
Form::uploadFileOne 单文件上传组件
1、cart.component.html 姓名、地址和提交组成的表单 checkoutForm 属性来存储表单模型 // ngSubmit 事件绑定来监听表单提交,并使用 checkoutForm 值调用 onSubmit() 方法 <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)"> <d
1、复选框使用,form()方法的第三个参数是给表单构造器传递参数,表单构造器通过getData()方法获取数据 ->add(‘rules’,‘choice’, [ ‘label’ => ‘规则列表’, ‘choices’ => $this->getData(‘result’), ‘choice_options’ => [ ‘wrapper’ => [‘class’ => ‘choice-wrap
tp5-form-builder THINKPHP5 表单自动构建组件 ####功能 THINKPHP5 表单自动构建组件,主要在THINKPHP5.x控制器中使用,方便自动构建所需要的字段,目前实现的有文本框,下拉选择,单选,复选,图片上传,静态文字,多行文本,wangeditor编辑器等 ####说明 把view下的文件放入你的后台view目录中,在控制器中调用即可(参照Config.php调
#Bootstrap Form Builder Warning: Currently using Bootstrap v. 2.3.1 (Not Bootstrap 3 ready.) ##What's this? A Drag-and-drop form builder for twitter bootstrap. ##Where can I see it in action? It's h
介绍 用于数据录入、校验,支持输入框、单选框、复选框、文件上传等类型,2.5 版本开始支持此组件。 引入 import { createApp } from 'vue'; import { Form } from 'vant'; const app = createApp(); app.use(Form); 代码演示 基础用法 在表单中,每个 Field 组件 代表一个表单项,使用 Field
基本表单使用 <form id="my-form" action="/test"> <div class="field-row"> <label class="field-label">姓名:</label> <span data-ui-id="uNameTextBox"><input type="text"></span> </div> <div class
表单组件。 Usage 全部引入 import { Form } from 'beeshell'; 按需引入 import { Form } from 'beeshell/dist/components/Form'; Examples Standard 布局设计 一个 Form.Item 内部分成三个区域,label 放在左边,Form.Item 的 children 的第一个元素放在右边,其
form 表单 效果展示 基本用法 <form class="page-wrap" method="post" action="./doc/json/ajaxDone.json" onsubmit="return validateCallback(this, navViewAjaxDoneClose)" > <header> <div class="toolbar">
Form 表单 1.3.0 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 此组件一般是用于表单验证使用,每一个表单域由一个u-form-item组成,表单域中可以放置u-input、u-checkbox、u-radio、u-switch等。 在表单组中,通过model参数绑定一个对象,这个对象的属性为各个u-form
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据 典型表单 包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。 在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="f
Form 表单 由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据 典型表单 包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。 ::: demo 在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicke
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 我们为表单添加了 Angular 的响应式支持,你可以在为表单定义多种状态,并从各类组件中收集变化与数据流,这会让你的 应用更具表现力,并更容易梳理、扩展与测试。 如果你对这一编程风格不太了解,可以考虑先从官方文档学习开始 Reactive Forms。当然除此之外,你仍旧可以使用熟悉模板驱动方式编程。 输入框表单 除了显示错