Yii2: поля ActiveForm

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

Сегодня рассмотрим использование yii\bootstrap\ActiveForm  в деталях. Наглядным примером послужит демонстрация и исходные коды (модуль simpleactiveform).

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

Первым делом укажем, где искать используемые классы 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([
        'a' => 'Элемент А',
        'б' => 'Элемент Б',
        'в' => 'Элемент В',
    ]);

Радио кнопки

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

$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([
        'А' => 'Вариант А',
        'Б' => 'Вариант Б',
        'В' => 'Вариант В',
    ],
    [
        'prompt' => 'Выберите один вариант'
    ]);

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

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

Html::submitButton('Сохранить', ['class' => 'btn btn-primary']);

Заключение

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

12 thoughts on “Yii2: поля ActiveForm

  1. Serg

    Спасибо, супер.
    как добавить свой id для каждого поля? yii ведь сам генерирует.
    С удавольствием поддержу проект!!!

    1. nix Автор записи

      $form->field() принимает третьим параметром массив с настройками. Где при помощи ‘inputOptions’ можно настроить параметры тега input.
      Пример:
      $form->field($model, ’email’, [
      ‘inputOptions’ => [
      ‘id’ => ‘my-email-input-id’,
      ],
      ])->input(’email’);

    1. nix Автор записи

      кодировку устанавливаем:
      1. В настройках веб-сервера;
      2. В layout, при помощи тега ;
      3. Все файлы, в том числе *.php, сохраняем в кодировке «UTF-8 без БОМ».

  2. Александр

    Здравствуйте! Вот везде вижу ‘id’ => ‘form-input-example’,
    А где этот айди потом высплывает? В Yii::$app->request->post() его почему-то нет! Зачем он и где его достать?

    1. nix Автор записи

      Это установка атрибута id формы:

      Можно не указывать, если нет необходимости в нём, в таком случае виджет сгенерирует его автоматически.

  3. Артем

    А не подскажите в чём может быть проблема??
    Необходимо вместе с 3-мя текстовыми полями загрузить картинку-эмблемку. В виде, в форме:
    field($model, ‘team_league’)->dropDownList([‘1’ => ‘Испания’, ‘2’ => ‘Англия’, ‘3’ => ‘Германия’]) ?>
    field($model, ‘team_name’)->textInput([‘maxlength’ => true]) ?>
    field($model, ‘team_embl’)->fileInput() ?>
    field($model, ‘team_stadium’)->textInput([‘maxlength’ => true]) ?>
    isNewRecord ? ‘Добавить’ : ‘Обновить’, [‘class’ => $model->isNewRecord ? ‘btn btn-danger’ : ‘btn btn-primary’]) ?>
    В контроллере:
    public function actionCreate()
    {
    $model = new Team();
    $modelFile = new UploadForm();
    if (Yii::$app->request->isPost) {
    $modelFile->team_embl = UploadedFile::getInstance($model, ‘team_embl’);
    if ($modelFile->team_embl && $modelFile->validate()) {
    $modelFile->team_embl->saveAs(‘img/embl/’ . $modelFile->team_embl->baseName . ‘.’ . $modelFile->team_embl->extension);
    $model->team_embl = ‘/img/embl/’ . $modelFile->team_embl->baseName . ‘.’ . $modelFile->team_embl->extension;
    }
    }
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
    return $this->redirect([‘view’, ‘id’ => $model->team_id]);
    } else {
    return $this->render(‘create’, [
    ‘model’ => $model,
    ‘modelFile’ => $modelFile,
    ]);
    }
    }
    Но всё равно В массиве $_POST:
    [ ‘team_league’ => ‘3’
    ‘team_name’ => ‘Айнтрахт’
    ‘team_embl’ => »
    ‘team_stadium’ => ‘Стадион’ ]
    Уже просто отчаялся — что только не пробовал! Ставить отдельное расшерение для этого совсем не хочется

    1. UzGuerilla

      Есть.
      <?php

      use yiiwidgetsActiveForm;


      field($model, ‘added’)->widget(yiijuiDatePicker::classname(), [‘dateFormat’ => ‘yyyy-MM-dd’]) ?>

  4. StevenKic

    Класс yiiwidgetsActiveForm будет читать правила проверки заявленные в модели и генерировать соответствующий код JavaScript для валидаторов, которые поддерживают проверку на стороне клиента. Когда пользователь изменяет значение поля ввода или отправляет форму, JavaScript на стороне клиента будет срабатывать и проверять введенные данные.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *