Как сверстать формы в yii?

Question

[Степан Панов]

Подскажите пожалуйста как реализовать вот такую верстку:


из такой (На данный момент):

<?= $form->field($orderForm, 'isAddressesEqual')
            ->label($orderForm->getAttributeLabel('billingAddress'))->checkbox([
                'class' => 'js-addresses-is-equal',
                'data-remeber' => true,
            ])->label('<span class="checkbox-text">'.$orderForm->getAttributeLabel('isAddressesEqual').'</span>')?>

Comments

[Дмитрий]

Доброе утро.
А что именно у Вас не получается?

Answer 1

[Максим]

Я думаю, что вам поможет эта статья https://yiico.ru/blog/499-shpargalka-po-formam-act...

Вам нужно смотреть в сторону параметра “template”. Думаю, что это поможет

<?php $form = ActiveForm::begin([
        'layout'=>'horizontal',
        'options' => ['class' => 'signup-form form-register1'],
        'fieldConfig' => [
             'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
            'horizontalCssClasses' => [
                'label' => 'col-sm-4',
                'offset' => 'col-sm-offset-4',
                'wrapper' => 'col-sm-8',
                'error' => '',
                'hint' => '',
            ],
        ],
    ]); ?>

Или так

<?= Html::activeLabel($model, 'password') ?>
<?= Html::activePasswordInput($model, 'password') ?>
<?= Html::error($model, 'password') ?>

or

<?= Html::activeLabel($model, 'username', ['label' => 'name']) ?>
<?= Html::activeTextInput($model, 'username') ?>
<div class="hint-block">Please enter your name</div>
<?= Html::error($model, 'username') ?>

Answer 2

[Максим Тимофеев]

Не могут одновременно в предложении встречаться "сверстать" и название backend php framework-а. При чем тут yii? Сверстать это про css и html.
Если есть сложности с самим виджетом форм, то вот:
https://www.yiiframework.com/doc/guide/2.0/en/inpu...
https://www.yiiframework.com/doc/api/2.0/yii-widge...
https://www.yiiframework.com/doc/api/2.0/yii-widge...
https://www.yiiframework.com/doc/guide/2.0/ru/star...