От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой и следующих статьях мы подробнее рассмотрим работу с виджетом Yii2 ActiveForm. В частности, мы узнаем о различных методах, позволяющих отрисовать форму и ее поля – это методы begin, field, checkbox и другие.
Итак, мы продолжаем с вами знакомство с виджетом ActiveForm и его методами, которые позволяют нам создавать необходимые формы на странице. Напомню, в предыдущей статье мы с вами воспользовались методом field, который позволяет вывести поле формы. Также дополнительно мы использовали методы для настройки поля – это метод passwordInput, который вместо поля типа text сгенерирует поле типа password для ввода пароля и метод checkbox, генерирующий чекбокс.
В итоге мы получили достаточно симпатичную форму, которая использует классы Bootstrap. Вот исходный код поля, который генерируется по умолчанию:
Как видим, поле помещено в блок с классом form-group, есть label и input с классом form-control, а также есть параграф, в который будут выводиться ошибки валидации, если таковые будут. И вот здесь возникает вопрос: а что если мы хотим изменить данную структуру? Например, захотим поменять местами label и input? Или захотим, чтобы ошибки выводились не под полем, а рядом с ним, справа? Или вовсе захотим вместо классов Bootstrap использовать свои классы? Как быть?
Фреймворк Yii2. Быстрый старт
Получите курс и узнайте, как с помощью фреймворка Yii2 разрабатывать веб-приложения на примере блога
Смотреть курсИ вот здесь нам на помощь приходит свойство template класса yii\widgets\ActiveField. Используя это свойство, мы можем настроить каждый из этих элементов. Давайте, к примеру, создадим форму, в которой ошибки валидации будут выводиться рядом с полями, а сами поля сделаем меньшего размера. Для этого используем следующий код:
|
1 2 3 4 5 6 |
<?= $form->field($model, 'username', [ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>' ])?> <?= $form->field($model, 'password', [ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>' ])->passwordInput() ?> |
В итоге мы получим нужный вариант разметки для полей нашей формы:
Что касается чекбокса, то здесь template необходимо использовать уже не в методе field, а в методе checkbox:
|
1 2 3 |
<?= $form->field($model, 'rememberMe')->checkbox([ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>' ])?> |
Также у вас может возникнуть еще один вопрос: а что если у нас большая форма с десятками полей и для всех нужен другой форма? Получается, мы должны дублировать код template для каждого из полей? На самом деле нет. Yii позволяет задать единоразово шаблон для всех полей и сделать это можно в методе begin, вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $form = ActiveForm::begin([ 'id' => 'test-form', 'options' => ['class' => 'form-horizontal'], 'fieldConfig' => [ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>', ], ]); ?> <?= $form->field($model, 'username')?> <?= $form->field($model, 'password')->passwordInput() ?> <?= $form->field($model, 'rememberMe')->checkbox([ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>' ])?> <?php ActiveForm::end(); ?> |
Если теперь обновить страницу браузера, то мы увидим все тот же результат. Все просто, не так ли? В следующей статье мы еще немного поработаем с виджетом ActiveForm. Ну а на сегодня пока все.
Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
Фреймворк Yii2. Быстрый старт
Получите курс и узнайте, как с помощью фреймворка Yii2 разрабатывать веб-приложения на примере блога
Смотреть курс
Комментарии (3)