Examples: Standard Layout

If no layout is specified on the form object (or if it's set to default) then a stacked form is created.

<?php $form = ActiveForm::begin() ?>

Following is a list of the most common form elements to exemplify different options and validation states.


Default Options

Error state:

Demolabel cannot be blank.

Demolabel cannot be blank.

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo'); ?>
<?php ActiveForm::end(); ?>

Hint

Hint text

Hint text

Error state:

Hint text

Demolabel cannot be blank.

Demolabel cannot be blank.

Hint text

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->hint('Hint text'); ?>
<?php ActiveForm::end(); ?>

Placeholder

Error state:

Demolabel cannot be blank.

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputOptions' => [
            'placeholder' => 'Placeholder',
        ],
    ]); ?>
<?php ActiveForm::end(); ?>

Disabled Label

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputOptions' => [
            'placeholder' => $model->getAttributeLabel('demo')
        ],
    ])->label(false); ?>
<?php ActiveForm::end(); ?>

Column Sizing

Error state:

Demolabel cannot be blank.

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'template' => '{label} <div class="row"><div class="col-xs-4">{input}{error}{hint}</div></div>',
    ]) ?>
    <?= $form->field($model, 'demo', [
        'template' => '{label} <div class="row"><div class="col-xs-6">{input}{error}{hint}</div></div>',
    ]) ?>
    <?= $form->field($model, 'demo', [
        'template' => '{label} <div class="row"><div class="col-xs-8">{input}{error}{hint}</div></div>',
    ]) ?>
<?php ActiveForm::end(); ?>

List Controls

Hint Text

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->dropDownList($items) ?>
    <?= $form->field($model, 'demo')->checkboxList($items) ?>
    <?= $form->field($model, 'demo')->hint('Hint Text')->radioList($items) ?>
<?php ActiveForm::end(); ?>

Inline Lists

Hint Text

Demolabel cannot be blank.

Demolabel cannot be blank.

Hint Text

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->inline()->checkboxList($items) ?>
    <?= $form->field($model, 'demo')->hint('Hint Text')->inline()->radioList($items) ?>
<?php ActiveForm::end(); ?>

Custom Inputs

@

@.00

<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}'.
            '<span class="input-group-addon">.00</span></div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">'.
            Html::checkbox('test').'</span>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-btn">'.
            '<button class="btn btn-default">Go!</button></span>{input}</div>',
    ]); ?>
    <?php $menu = Menu::widget([
        'options' => [
            'class'=>'dropdown-menu',
        ],
        'items' => [
            ['label' => 'Action', 'url' => '#'],
            ['label' => 'Another Action', 'url' => '#'],
            ['options' => ['class'=>'divider']],
            ['label' => 'Separated Link', 'url' => '#'],
        ],
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><div class="input-group-btn">'.
            '<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action '.
            '<span class="caret"></span></button>'.$menu.'</div>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><div class="input-group-btn">'.
            '<button class="btn btn-default">Action</button>'.
            '<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">'.
            '<span class="caret"></span></button>'.$menu.'</div>{input}</div>',
    ]); ?>
<?php ActiveForm::end(); ?>