От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой и следующих статьях мы подробнее рассмотрим работу с виджетом Yii2 ActiveForm. В частности, мы узнаем о различных методах, позволяющих отрисовать форму и ее поля – это методы begin, field, checkbox и другие.
Итак, мы продолжаем с вами знакомство с виджетом ActiveForm и его методами, которые позволяют нам создавать необходимые формы на странице. Напомню, в предыдущей статье мы с вами воспользовались методом field, который позволяет вывести поле формы. Также дополнительно мы использовали методы для настройки поля – это метод passwordInput, который вместо поля типа text сгенерирует поле типа password для ввода пароля и метод checkbox, генерирующий чекбокс.
В итоге мы получили достаточно симпатичную форму, которая использует классы Bootstrap. Вот исходный код поля, который генерируется по умолчанию:
Как видим, поле помещено в блок с классом form-group, есть label и input с классом form-control, а также есть параграф, в который будут выводиться ошибки валидации, если таковые будут. И вот здесь возникает вопрос: а что если мы хотим изменить данную структуру? Например, захотим поменять местами label и input? Или захотим, чтобы ошибки выводились не под полем, а рядом с ним, справа? Или вовсе захотим вместо классов Bootstrap использовать свои классы? Как быть?
И вот здесь нам на помощь приходит свойство template класса yii\widgets\ActiveField. Используя это свойство, мы можем настроить каждый из этих элементов. Давайте, к примеру, создадим форму, в которой ошибки валидации будут выводиться рядом с полями, а сами поля сделаем меньшего размера. Для этого используем следующий код:
<?= $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:
<?= $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, вот так:
<?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
Научиться
