Основной способ использования форм в Yii - через yii\widgets\ActiveForm
. Этот подход следует предпочесть, если форма основана на модели. Кроме того, в yii\helpers\Html
есть несколько полезных методов, которые обычно используются для добавления кнопок и помощи текста в любой форме.
Форма, отображаемая на стороне клиента, в большинстве случаев будет иметь соответствующую модель, которая используется для проверки своих входных данных на стороне сервера. При создании форм на основе моделей первым шагом является определение самой модели. Модель может быть основана либо на классе Active Record, представляющем некоторые данные из базы данных, либо на родовом классе Model (начиная с yii\base\Model
) для захвата произвольного ввода, например, формы входа в систему.
В следующем примере мы покажем, как универсальная модель может использоваться для формы входа в систему:
<?php
class LoginForm extends \yii\base\Model
{
public $username;
public $password;
public function rules()
{
return [
// define validation rules here
];
}
}
В контроллере мы передадим экземпляр этой модели в вид, в котором виджет ActiveForm используется для отображения формы:
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
$form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['class' => 'form-horizontal'],
]) ?>
<?= $form->field($model, 'username') ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-11">
<?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
</div>
</div>
<?php ActiveForm::end() ?>
Перенос с помощью begin()
и end()
В приведенном выше коде ActiveForm::begin()
не только создает экземпляр формы, но также отмечает начало формы. Весь контент, размещенный между ActiveForm::begin()
и ActiveForm::end()
, будет заключен в тег HTML <form>
. Как и в любом виджете, вы можете указать некоторые параметры, как виджет должен быть сконфигурирован путем передачи массива методу begin. В этом случае передается дополнительный CSS-класс и идентификационный идентификатор для использования в открывающем теге <form>
. Для всех доступных опций обратитесь к документации API yii\widgets\ActiveForm
.
ActiveField
Чтобы создать элемент формы в форме вместе с меткой элемента и применимым валидатором JavaScript, вызывается метод ActiveForm::field()
, который возвращает экземпляр yii\widgets\ActiveField
. Когда результат этого метода отображается непосредственно, результат является обычным (текстовым) вводом. Чтобы настроить вывод, вы можете привязать дополнительные методы ActiveField к этому вызову:
// a password input
<?= $form->field($model, 'password')->passwordInput() ?>
// adding a hint and a customized label
<?= $form->field($model, 'username')->textInput()->hint('Please enter your name')->label('Name') ?>
// creating a HTML5 email input element
<?= $form->field($model, 'email')->input('email') ?>
Это создаст все теги <label>
, <input>
и другие теги в соответствии с шаблоном, определенным полем формы. Имя поля ввода определяется автоматически из имени формы модели и имени атрибута. Например, имя для поля ввода для атрибута username
в приведенном выше примере будет LoginForm [имя пользователя]
. Это правило именования приведет к тому, что массив всех атрибутов для формы входа будет доступен в $ _POST ['LoginForm']
на стороне сервера.
Указание атрибута модели может быть выполнено более сложными способами. Например, когда атрибут может принимать значение массива при загрузке нескольких файлов или выборе нескольких элементов, вы можете указать его, добавив []
к имени атрибута:
// allow multiple files to be uploaded:
echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']);
// allow multiple items to be checked:
echo $form->field($model, 'items[]')->checkboxList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']);
Дополнительные HTML-теги могут быть добавлены в форму с использованием простого HTML или с использованием методов из класса Html-helper, как это делается в приведенном выше примере с помощью Html::submitButton ()
.
Создание списков
Существует 3 типа списков:
- Dropdown lists
- Radio lists
- Checkbox lists
Чтобы создать список, вы должны подготовить элементы. Это можно сделать вручную:
$items = [
1 => 'item 1',
2 => 'item 2'
]
Или путем извлечения из БД:
$items = Category::find()
->select(['label'])
->indexBy('id')
->column();
Эти $items должны обрабатываться различными виджетами списка. Значение поля формы (и текущего активного элемента) будет автоматически установлено текущим значением атрибута $model.
Создание раскрывающегося списка
Мы можем использовать метод ActiveField yii\widgets\ActiveField::dropDownList()
для создания выпадающего списка:
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->dropdownList([
1 => 'item 1',
2 => 'item 2'
],
['prompt'=>'Select Category']
);
Создание списка радиостанций
Мы можем использовать метод ActiveField yii\widgets\ActiveField::radioList()
для создания списка радиопередач:
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->radioList([
1 => 'radio 1',
2 => 'radio 2'
]);
Создание списка флажков
Мы можем использовать метод ActiveField yii\widgets\ActiveField::checkboxList()
для создания списка флажков:
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->checkboxList([
1 => 'checkbox 1',
2 => 'checkbox 2'
]);
Работа с Pjax
Виджет Pjax позволяет обновлять определенный раздел страницы, а не перезагружать всю страницу. Вы можете использовать его для обновления только формы и замены ее содержимого после отправки.
Вы можете настроить $formSelector
, чтобы указать, какая форма отправки может вызвать pjax. Если не задано, все формы с атрибутом data-pjax в закрытом содержимом Pjax будут вызывать запросы pjax.
use yii\widgets\Pjax;
use yii\widgets\ActiveForm;
Pjax::begin([
// Pjax options
]);
$form = ActiveForm::begin([
'options' => ['data' => ['pjax' => true]],
// more ActiveForm options
]);
// ActiveForm content
ActiveForm::end();
Pjax::end();
Значения в кнопках отправки и загрузки файлов
Известны проблемы с использованием jQuery.serializeArray()
при работе с файлами и передачей значений кнопок, которые не будут решены, а вместо этого устаревают в пользу класса FormData, представленного в HTML5.
Это означает, что официальная поддержка файлов и передача значений кнопок с помощью ajax или использование виджета Pjax зависит от поддержки браузера для класса FormData.
0 комментариев