使用PHP快速创建现代化的form表单,支持前端js扩展,就是方便

form-builder

使用PHP快速创建现代化的form表单,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。

详细查看Github地址 | Composer地址

表单使用form-create js表单生成器生成

如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢!

本项目还在不断开发完善中,如有建议或问题请在这里提出

安装

composer require xaboy/form-builder

示例

各组件配置属性 点击查看

请在  config/config.php 中配置 formSuccessScript 属性。设置为form提交成功后的js代码或js地址,重新 window.formCreate.formSuccess 方法(带<script>标签) 或者直接修改 formScript.php

namespace Test;
use FormBuilder\Form;

//input组件
$input = Form::input(‘goods_name‘,‘商品名称‘);

//日期区间选择组件
$dateRange = Form::dateRange(
    ‘limit_time‘,
    ‘区间日期‘,
    strtotime(‘- 10 day‘),
    time()
);

//省市二级联动组件
$cityArea = Form::city(‘address‘,‘收货地址‘,[
    ‘陕西省‘,‘西安市‘
]);

$checkbox = Form::checkbox(‘label‘,‘表单‘,[])->options([
    [‘value‘=>‘1‘,‘label‘=>‘好用‘,‘disabled‘=>true],
    [‘value‘=>‘2‘,‘label‘=>‘方便‘,‘disabled‘=>true]
]);

//创建form
$form = Form::create(‘/save.php‘,[
    $input,$dateRange,$cityArea
]);

$html = $form->setMethod(‘get‘)->setTitle(‘编辑商品‘)->view();

//输出form页面
echo $html;

组件

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 单文件上传组件

输出

namespace \FormBuilder\Json
  • Json::succ(msg,data = []) 表单提交成功
  • Form::fail(errorMsg,data = []) 表单提交失败
  • Form::uploadSucc(filePath,msg) 文件/图片上传成功,上传成功后返回文件地址
  • Form::uploadFail(errorMsg) 文件/图片上传失败

原文地址:https://www.cnblogs.com/xaboy/p/9226600.html

时间: 2024-08-09 12:24:05

使用PHP快速创建现代化的form表单,支持前端js扩展,就是方便的相关文章

js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param {object} 参数对象 * url 必填 提交地址 * methond 选填 默认post 提交方式 post get * target 选填 默认_self 当前页面还是新页面 _self _blank * 其它参数 */ function jsFormSubmit(params) { var turnForm = document.createElement("form"); //一定要

将复杂form表单序列化serialize-object.js

<form class="form-horizontal" role="form" id="myform" action="" method="post"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Ema

form表单 无法提交js动态添加的表单元素问题。。

第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url  "> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </form> &l

react之form表单工具:formik+yup

从网上搜到的form表单解决方案如下: 1.uform,地址:https://uformjs.org/#/MpI2Ij/dNFzFyTb UForm 和核心特性: 基于标准 JSON Schema 协议,数据化构建表单 基于 rxjs 对表单内部的副作用做统一管理,轻松解决各种复杂联动校验场景 支持各种表单布局方案 支持可视化构建表单 支持自定义组件扩展 分布式状态管理,表单性能更高 不足:基于styled-components来开发的,涉及到的自定义样式主要是Form和FormItem层面上的

JavaScript 创建一个 form 表单并提交

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input onclick="MakeForm()" type="button" class="btn grey"

JavaScript之form表单的序列化和json化[form.js]

一.应用场景 form提交时,使用ajax提交. 二.效果 通过本工具,实现表单所有form的快速序列化和json化,使前端人员在ajax提交form表单的时,脱离重复性的,大劳动量的手动抽取form属性和对应的值. 三.源码[form.js] //将数据序列化成 url请求方式的编码 function serialize(form){ var len=form.elements.length;//表单字段长度;表单字段包括<input><select><button>

# Django admin、form表单的应用记录

目录 Django admin.form表单的应用记录 一 Django admin 1. 使用介绍 form组件使用 1. form的作用 2. form组件生成HTMKL代码 3. form组件校验数据有效性 3. form组件如何给html标签设置默认值 Django admin.form表单的应用记录 一 Django admin 1. 使用介绍 1. 创建超级用户 python manage.py createsuperuser username: wph password: 1231

python django Form表单

Django 拥有自己独立的表单功能块,可以完成: 1.表单的定义 2.表单的校验 3.表单的前端样式 等功能,方便我们开发,那么接下来,我们看一下表单的定义 首先我们确定我们要编写的功能,一个提供给博客的访客发送自己的联系方式的功能.并且搭建相对应的数据库 1 from django.db import models 2 3 class Connection(models.Model): 4 con_name = models.CharField(max_length = 32,verbose

实现一个兼容eleUI form表单的多选组件

本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常规的用eleUI校验表单只需要在rules中正常定义: rules: FormRules = { labels: [ { required: true, type: 'array', message: '请选择标签', trigger: 'change' }, { required: true, t