ActiveForm Demo

Thankful to Krajee! BUY A COFFEEor to get more out of us.

This is a demo of the advanced kartik\form\ActiveForm and kartik\form\ActiveField widget. The demo demonstrates a complex layout scenario with nested inline fields inside Bootstrap library / 4 Horizontal Forms. For explanation, you can refer this article.

Horizontal Form Demo

Amount

Operation Dates

Enter begin date

Enter end date

Experiment Dates

Address

Code

<?php
use kartik\form\ActiveForm;
use yii\helpers\Html;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_HORIZONTAL]);
?>
<div class="card">
    <div class="card-header"><h4>Horizontal Form Demo</h4></div>
    <div class="card-body">
        <?= $form->field($model, 'amount',['labelOptions'=>['class'=>'col-md-2']]);
        ?>
        <div class="mb-2 row mb-0">
            <?= Html::activeLabel($model, 'from_date', ['label'=>'Operation Dates', 'class'=>'col-sm-2 col-form-label']) ?>
            <div class="col-sm-2">
                <?= $form->field($model, 'from_date',['showLabels'=>false])->textInput(['placeholder'=>'From Date'])->hint('Enter begin date'); ?>
            </div>
            <div class="col-sm-2">
                <?= $form->field($model, 'to_date',['showLabels'=>false])->textInput(['placeholder'=>'To Date'])->hint('Enter end date'); ?>
            </div>
            <?= Html::activeLabel($model, 'begin_date', ['label'=>'Experiment Dates', 'class'=>'col-sm-2 col-form-label']) ?>
            <div class="col-sm-2">
                <?= $form->field($model, 'begin_date',['showLabels'=>false])->textInput(['placeholder'=>'Begin Date']); ?>
            </div>
            <div class="col-sm-2">
                <?= $form->field($model, 'end_date',['showLabels'=>false])->textInput(['placeholder'=>'End Date']); ?>
            </div>
        </div>
        <div class="mb-2 row mb-0">
            <?= Html::activeLabel($model, 'address', ['class'=>'col-sm-2 col-form-label']) ?>
            <div class="col-sm-3">
                <?= $form->field($model, 'address', ['showLabels'=>false])->textInput(['placeholder'=>'Enter address...']); ?>
            </div>
            <div class="col-sm-2">
                <?= $form->field($model, 'city', ['showLabels'=>false])->textInput(['placeholder'=>'Enter city...']); ?>
            </div>
            <div class="col-sm-3">
                <?= $form->field($model, 'state_1', ['showLabels'=>false])->widget(Select2::classname(), [
                    'data'=>$model->select2_data,
                    'pluginOptions'=>['allowClear'=>true],
                    'options' => ['placeholder'=>'Select state...']
                ]); ?>
            </div>
            <div class="col-sm-2">
                <?= $form->field($model, 'country', ['showLabels'=>false])->textInput(['placeholder'=>'Enter country...']); ?>
            </div>
    </div>
    <div class="card-footer text-right text-end">
        <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>
</div>
<?php ActiveForm::end(); ?>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

Demo

Horizontal Form Demo

Code

Comments & Discussion

Note