README

Yii Form

The package provides a set of widgets to help with dynamic server-side generation of HTML forms. The following widgets are available out of the box:

input fields: Checkbox, CheckboxList, Color, Date, DateTimeLocal, Email, File, Hidden, Image, Number, Password, RadioList, Range, Select, Telephone, Text, Textarea, Time, Url;
buttons: Button, ResetButton, SubmitButton;
group widgets: ButtonGroup, Fieldset.
other: ErrorSummary.

These themes are available out of the box:

Bootstrap 5 Horizontal,
Bootstrap 5 Vertical.

Requirements

PHP 8.1 - 8.5.

Installation

The package could be installed with composer:

composer require yiisoft/form

General usage

Configure themes (optional):

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

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

... and use Field helper to create widgets:

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::color('favoriteColor')->label('Favorite Color')->value('#3498db');
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');

The result of executing the code above will be:

<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">Favorite Color</label>
    <input type="color" class="form-control" name="favoriteColor" value="#3498db">
</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>