Back to top

Examples: Horizontal Layout

If layout is set to horizontal a horizontal form is rendered. 

<?php $form = $this->beginWidget('Codemix\BS3ActiveForm', array(
    'layout' => 'horizontal',
)); ?>

Here the standard template is set to {label} {beginWrapper} {input} {error} {endWrapper} {help}, which will use 3 columns for label (col-sm-3), input (col-sm-6) and help text (col-sm-3). Error messages get rendered below the input. The column arrangement can easily be changed, though (see below).

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.

<?= $form->group('textField',$model, 'demo') ?>

Help Text

Help text

Error state:

Demolabel cannot be blank.

Help text

<?= $form->group('textField',$model, 'demo', array(
    'helpText' => 'Help text',
)) ?>

Placeholder

<?= $form->group('textField',$model, 'demo', array(
    'inputOptions' => array(
        'placeholder' => 'Placeholder',
    ),
)) ?>

Disabled Label

<?= $form->group('textField',$model, 'demo', array(
    'label' => false,
    'inputOptions' => array(
        'placeholder' => $model->getAttributeLabel('demo'),
    ),
)) ?>

Column Sizing

Help text

Help text

Error state:

Demolabel cannot be blank.

Help text

<?= $form->group('textField',$model, 'demo', array(
    'wrapperOptions' => array(
        'class' => 'col-sm-2',
    ),
    'helpText' => 'Help text',
)) ?>
<?= $form->group('textField',$model, 'demo', array(
    'wrapperOptions' => array(
        'class' => 'col-sm-4',
    ),
    'helpText' => 'Help text',
)) ?>

List Controls

Help Text

<?= $form->group('dropDownList',$model,'demo',$opts) ?>
<?= $form->group('checkBoxList',$model,'demo',$opts) ?>
<?= $form->group('checkBoxList',$model,'demo',$opts, array(
    'label' => false,
)) ?>
<?= $form->group('radioButtonList',$model,'demo',$opts, array(
    'helpText' => 'Help Text',
)) ?>

Inline Lists

<?= $form->group('checkBoxList',$model,'demo',$opts, array(
    'inline' => true,
)) ?>
<?= $form->group('radioButtonList',$model,'demo',$opts, array(
    'inline' => true,
)) ?>

Custom Inputs

@
@.00
<?= $form->group('textField',$model,'demo', array(
    'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}</div>',
)) ?>
<?= $form->group('textField',$model,'demo', array(
    'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}'.
        '<span class="input-group-addon">.00</span></div>',
)) ?>
<?= $form->group('textField',$model,'demo', array(
    'inputTemplate' => '<div class="input-group"><span class="input-group-addon">'.
        $form->checkBox($model, 'demo').'</span>{input}</div>',
)) ?>
<?= $form->group('textField',$model,'demo', array(
    'inputTemplate' => '<div class="input-group"><span class="input-group-btn">'.
        '<button class="btn btn-default">Go!</button></span>{input}</div>',
)) ?>
<?php $menu = $this->widget('zii.widgets.CMenu', array(
    'htmlOptions' => array('class'=>'dropdown-menu'),
    'items' => array(
        array('label'=>'Action', 'url'=>'#'),
        array('label'=>'Another Action', 'url' =>'#'),
        array('itemOptions'=>array('class'=>'divider')),
        array('label'=>'Separated link', 'url'=>'#'),
    ),
), true); ?>
<?= $form->group('textField',$model,'demo', array(
    '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->group('textField',$model,'demo', array(
    '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>',
)) ?>

Custom Columns

<?php $form = $this->beginWidget('Codemix\BS3ActiveForm', array(
    'layout' => 'horizontal',
    'template' => "{label}\n{beginWrapper}\n{input}\n{help}\n{error}\n{endWrapper}",
    'horizontalLabelClass' => 'col-sm-4',
    'horizontalWrapperOffsetClass' => 'col-sm-offset-4',
    'horizontalWrapperClass' => 'col-sm-8',
    'horizontalErrorClass' => '',
    'horizontalHelpClass' => '',
)); ?>

Help text

Error state:

Help text

Demolabel cannot be blank.

Demolabel cannot be blank.

Demolabel cannot be blank.

Demolabel cannot be blank.

<?= $form->group('textField',$model, 'demo', array(
    'helpText' => 'Help text',
)) ?>
<?= $form->group('dropDownList',$model, 'demo', $opts) ?>
<?= $form->group('checkBoxList',$model, 'demo', $opts) ?>
<?= $form->group('checkBox',$model, 'demo') ?>