16 нояб. 2017 г.

Поля ActivForm

image

Наверняка, одними из самых часто используемых вами yii2 виджетов станут yii\widgets\ActiveForm и его улучшенная Bootstrap 3 версия — yii\bootstrap\ActiveForm.

Сегодня рассмотрим использование yii\bootstrap\ActiveForm  в деталях. 

 

Импорт нужных классов

Первым делом укажем, где искать используемые классы ActiveForm и Html.

use yii\bootstrap\ActiveForm;
use yii\helpers\Html;

Инициализация формы в представлении

Начало формы реализует метод begin() . В массиве передаем настройки формы, html идентификатор и класс, а так же 'enctype' => 'multipart/form-data', для возможности загрузки файлов.

//$form = ActiveForm::begin(); // Инициализация формы с настройками по-умолчанию
$form = ActiveForm::begin([
    'id' => 'form-input-example',
    'options' => [
        'class' => 'form-horizontal col-lg-11',
        'enctype' => 'multipart/form-data'
    ],
]);
// Содержимое формы
ActiveForm::end();

Ввод текста

Простое текстовое поле

Для вывода простого текстового поля достаточно выполнить  $form->field($model,'name');. В примере показано, как указать всплывающую подсказку и имя поля.

$form->field($model, 'text')->textInput()->hint('Введите любой текст')->label('Текстовое поле');

Многострочное текстовое поле

Пример вывода textarea с параметрами и заголовком.

$form->field($model, 'textArea')->textarea(['rows' => 2, 'cols' => 5])->label('Многострочное текстовое поле');

Ввод пароля

Введенные символы будут скрыты звездочками. Два варианта.

// Поле с подсказкой
$form->field($model, 'password')->passwordInput()->hint('Длинна пароля не меньше 10 символов.');
// Простое поле ввода пароля
$form->field($model, 'password')->input('password');

Поле ввода email

В ногу с html5, можно использовать специальное поле для ввода адреса электронной почты.

$form->field($model, 'email')->input('email');

Загрузка файлов

Метод  fileInput() используется для загрузки файлов. Параметр  'multiple' позволяет включить загрузку нескольких файлов одновременно.

Одиночная загрузка

$form->field($model, 'fileUpload')->fileInput();

Загрузка нескольких файлов сразу

$form->field($model, 'filesUpload[]')->fileInput(['multiple' => 'multiple']);

Чекбоксы

Вывод полей чекбокс осуществляется при помощи методов checkbox() и checkboxList().

Одиночный чекбокс

Вывод неактивного чекбокса с указанием заголовка и css стиля.

$form->field($model, 'checkbox')
    ->checkbox([
        'label' => 'Неактивный чекбокс',
        'labelOptions' => [
            'style' => 'padding-left:20px;'
        ],
        'disabled' => true
    ]);

Группа чекбоксов

$form->field($model, 'checkboxList')
    ->checkboxList([
        '1' => 'Элемент 1',
        '2' => 'Элемент 2',
        '3' => 'Элемент 3',
    ]);

Радио кнопки

Одиночная радио кнопка

$form->field($model, 'radioButton')
    ->radio([
        'label' => 'Радио кнопка',
        'labelOptions' => [
            'style' => 'padding-left:20px;'
        ]
    ]);

Группа радио кнопок

$form->field($model, 'radioButtonList')
    ->radioList([
        '1' => 'Первый',
        '2' => 'Второй',
        '3' => 'Третий'
    ]);

Список

Простой список с возможностью выбора нескольких вариантов.

$form->field($model, 'listBox')
    ->listBox([
        '1' => '1',
        2 => '2',
        '3' => 3,
        4 => 4,
        5 => 5
    ],
    [
        'multiple' => true,
        'prompt' => 'Выберите один или несколько вариантов',
        'style' => 'background:gray;color:#fff;'
    ]);

Выпадающий список

Вывод выпадающего списка с возможностью выбора только одного варианта.

$form->field($model, 'dropdownList')
    ->dropDownList([
        '1' => 'Вариант 1',
        '2' => 'Вариант 2',
        '3' => 'Вариант 3',
    ],
    [
        'prompt' => 'Выберите один вариант'
    ]);

Кнопка отправки формы

Классический элемент submit для отправки содержимого формы.

Html::submitButton('Отправить', ['class' => 'btn btn-primary']);

Заключение

Встроенный yii2 виджет ActiveForm перекрывает 90% потребностей программиста при создании пользовательского интерфейса в части html форм. При необходимости можно самостоятельно расширить этот класс или попытаться найти решения в сообществе.