表单 form
表单部件继承自基础表单部件 formBase。
提示
该部件仅提供表单渲染功能，如果需要实现一个包含标题栏和标题操作按钮的表单页面，推荐使用表单面板部件（formPanel）。
用法
包裹表单元素的同时，还可以设置表单的标题、提交方式、提交按钮等。
php
form
(
formGroup
(
set::name('name'),
set::label('项目名称'),
set::width('1/2'),
set::strong(true),
set::placeholder('请输入项目名称')
),
formRow
(
formGroup
(
set::width('1/2'),
set::label('所属项目集'),
set::name('program'),
),
icon('help')
),
formRow
(
formGroup
(
set::width('1/2'),
set::label('起止时间'),
set::required(true),
inputGroup
(
input
(
set::name('begin'),
set::value(date('Y-m-d')),
set::placeholder('开始日期'),
set::required(true)
),
'至',
input
(
set::name('end'),
set::placeholder('结束日期'),
set::required(true)
),
)
)
)
);html
<form class="form form-grid form-ajax" id="zin12" method="post">
<div class="form-row">
<div class="form-group required grow-0 w-1/2">
<label class="form-label required font-bold">项目名称</label>
<input class="form-control is-required" type="text" autocomplete="off" name="name" placeholder="请输入项目名称" id="name">
</div>
</div>
<div class="form-row">
<div class="form-group grow-0 w-1/2">
<label class="form-label">所属项目集</label>
<input class="form-control" type="text" autocomplete="off" name="program" id="program">
</div>
<i class="icon icon-help"></i>
</div>
<div class="form-row">
<div class="form-group required grow-0 w-1/2">
<label class="form-label required">起止时间</label>
<div class="input-group">
<input class="form-control is-required" type="text" autocomplete="off" name="begin" value="2023-04-20" placeholder="开始日期" id="begin">
<span class="input-group-addon">至</span>
<input class="form-control is-required" type="text" autocomplete="off" name="end" placeholder="结束日期" id="end">
</div>
</div>
</div>
<div class="form-row">
<div class="toolbar form-actions form-group gap-4 no-label">
<button class="toolbar-item btn primary" type="submit"><span class="text">保存</span></button>
<a class="toolbar-item btn btn-default" type="button" href=""><span class="text">返回</span></a>
</div>
</div>
<script>(function(){$(() => zui.create("ajaxForm","#zin12",[]));}())</script>
</form>提示
如示例所示，表单 form 组件与 面板组件 formPanel声明方式相似，使用 formGroup、formRow、inputGroup 组件来实现表单元素的布局。
属性
| 名称 | 类型 | 所属部件 | 可选 | 默认值 | 说明 |
|---|---|---|---|---|---|
method | "get""post" | formBase | ✓ | "post" | 表单提交方式。 |
url | string | formBase | ✓ | null | 表单提交地址。 |
actions | array | formBase | ✓ | null | 表单操作按钮，如果不指定则使用默认行为的 “保存” 和 “返回” 按钮。 |
actionsClass | string | formBase | ✓ | "form-group no-label" | 操作按钮栏的 CSS 类。 |
target | string | formBase | ✓ | "ajax" | 表单提交目标，如果是 'ajax' 提交则为 ajax，在禅道中除非特殊目的，都使用 ajax 进行提交。 |
submitBtnText | string | formBase | ✓ | null | 表单提交按钮文本，如果不指定则使用 $lang->save 的值。 |
cancelBtnText | string | formBase | ✓ | null | 表单取消按钮文本，如果不指定则使用 $lang->goback 的值。 |
back | string | formBase | ✓ | "APP" | 表单返回行为。 |
backUrl | string | formBase | ✓ | null | 表单返回链接。 |
ajax | array | formBase | ✓ | null | Ajax 表单选项。 |
formID | string | form | ✓ | null | 表单 ID，如果指定为 '$AUTO'，则自动生成 form-$moduleName-$methodName。 |
items | array | form | ✓ | null | 使用一个列定义对象数组来定义表单项。 |
fields | stringarrayfieldList | form | ✓ | null | 表单字段配置。 |
foldableItems | arraystring | form | ✓ | null | 可折叠的表单项。 |
pinnedItems | arraystring | form | ✓ | null | 固定显示的表单项。 |
customBtn | arraybool | form | ✓ | null | 是否显示表单自定义按钮。 |
toolbar | arraybool | form | ✓ | null | 额外的自定义按钮。 |
layout | string | form | ✓ | "horz" | 表单布局，可选值为：'horz'、'grid' 和 normal。 |
labelWidth | int | form | ✓ | null | 标签宽度，单位为像素。 |
requiredFields | string | form | ✓ | null | 必填项定义。 |
data | arrayobject | form | ✓ | null | 表单项值默认数据。 |
labelData | arrayobject | form | ✓ | null | 表单项标签默认数据。 |
loadUrl | string | form | ✓ | null | 动态更新 URL。 |
autoLoad | array | form | ✓ | null | 自动更新策略。 |