README

Yii 表单

该软件包提供了一套小部件，用于帮助动态生成 HTML 表单。以下是一些现成的小部件：

输入字段：Checkbox、CheckboxList、Date、DateTimeLocal、Email、File、Hidden、Image、Number、Password、RadioList、Range、Select、Telephone、Text、Textarea、Time、Url;
按钮：Button、ResetButton、SubmitButton;
分组小部件：ButtonGroup、Fieldset。
其他：ErrorSummary。

以下是一些现成的主题：

Bootstrap 5 水平
Bootstrap 5 垂直

需求

PHP 8.1 或更高版本。

安装

可以使用 composer 安装此软件包

composer require yiisoft/form

通用用法

配置主题（可选）

use Yiisoft\Form\ThemeContainer;
use Yiisoft\Form\ThemePath;

ThemeContainer::initialize(
    config: [
        'vertical' => require ThemePath::BOOTSTRAP5_VERTICAL,
        'horizontal' => require ThemePath::BOOTSTRAP5_HORIZONTAL,
    ],
    defaultConfig: 'vertical',
);

... 使用 Field 助手创建小部件

use Yiisoft\Form\PureField\Field;

echo Field::text('firstName', theme: 'horizontal')->label('First Name')->autofocus();
echo Field::text('lastName', theme: 'horizontal')->label('Last Name');
echo Field::select('sex')->label('Sex')->optionsData(['m' => 'Male', 'f' => 'Female'])->prompt('—');
echo Field::number('age')->label('Age')->hint('Please enter your age.');
echo Field::submitButton('Submit')->buttonClass('primary');

上述代码执行的结果将是

<div class="mb-3 row">
    <label class="col-sm-2 col-form-label">First Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="firstName" autofocus>
    </div>
</div>
<div class="mb-3 row">
    <label class="col-sm-2 col-form-label">Last Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="lastName">
    </div>
</div>
<div class="mb-3">
    <label class="form-label">Sex</label>
    <select class="form-select" name="sex">
        <option value>—</option>
        <option value="m">Male</option>
        <option value="f">Female</option>
    </select>
</div>
<div class="mb-3">
    <label class="form-label">Age</label>
    <input type="number" class="form-control" name="age">
    <div class="form-text">Please enter your age.</div>
</div>
<div class="mb-3">
    <button type="submit" class="primary">Submit</button>
</div>