The Form Builder widget allows you to build a form dynamically through a configuration array. The widget provides these features:
yii\base\model or yii\db\ActiveRecord.kartik\form\ActiveForm.columns property.kartik\form\ActiveField) including input widgets.Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
Form supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the Form::bsVersion property to one of the following.
To use with bootstrap 3 library - you can set Form::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)
To use with bootstrap 4 library - you can set Form::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)
To use with bootstrap 5 library - you can set Form::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)
Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):
'params' => [
'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
// other settings
// 'adminEmail' => 'admin@example.com'
]
If Form::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (Form::bsVersion property) will override the Yii::$app->params['bsVersion']. If Form::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, Form::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).
You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.
To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.
"yiisoft/yii2-bootstrap5": "@dev"
To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.
"yiisoft/yii2-bootstrap4": "@dev"
To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.
"yiisoft/yii2-bootstrap": "@dev"
The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:
yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)
yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)
yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)
This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:
Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.
'params' => [
'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
// you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
//
// other params settings below
// 'bsVersion' => '5.x',
// 'adminEmail' => 'admin@example.com'
]
Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.
// ...
'components' => [
'assetManager' => [
'bundles' => [
'kartik\form\ActiveFormAsset' => [
'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
],
],
],
],
When setting bsDependencyEnabled to false, you need to ensure that your app code/view layout loads the Bootstrap CSS and JS on your view before the Krajee CSS/JS are loaded to ensure that the Krajee extension JS plugins and CSS styles do not get broken.
Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.
For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.
Option 1: Font CSS version of Font Awesome:
<!-- on your view layout file HEAD section --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):
<!-- on your view layout file HEAD section --> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.
// on your view layout file use kartik\icons\FontAwesomeAsset; FontAwesomeAsset::register($this);
bsVersion:
string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.
To use with Bootstrap library - you can set this to any string starting with
3 (e.g. 3 or 3.3.7 or 4.x / 3.x)
To use with bootstrap 4 - you can set this to any string starting with
4 (e.g. 4 or 4.6.0 or 4.x)
To use with bootstrap 5 - you can set this to any string starting with
4 (e.g. 5 or 5.1.0 or 5.x)
bsColCssPrefixes:
array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.
[
3 => [
self::SIZE_X_SMALL => 'col-xs-',
self::SIZE_SMALL => 'col-sm-',
self::SIZE_MEDIUM => 'col-md-',
self::SIZE_LARGE => 'col-lg-',
self::SIZE_X_LARGE => 'col-lg-',
self::SIZE_XX_LARGE => 'col-lg-',
],
4 => [
self::SIZE_X_SMALL => 'col-',
self::SIZE_SMALL => 'col-sm-',
self::SIZE_MEDIUM => 'col-md-',
self::SIZE_LARGE => 'col-lg-',
self::SIZE_X_LARGE => 'col-xl-',
self::SIZE_XX_LARGE => 'col-xl-',
],
5 => [
self::SIZE_X_SMALL => 'col-',
self::SIZE_SMALL => 'col-sm-',
self::SIZE_MEDIUM => 'col-md-',
self::SIZE_LARGE => 'col-lg-',
self::SIZE_X_LARGE => 'col-xl-',
self::SIZE_XX_LARGE => 'col-xxl-',
],
];
model Model, or ActiveRecord, model instance extending from yii\base\Model or yii\db\ActiveRecord. One of form and model OR formName is mandatory.
form ActiveForm, the ActiveForm instance extending from kartik orm\ActiveForm or kartik orm\ActiveForm. You normally would call it as $form = \kartik orm\ActiveForm::begin();. One of form and model OR formName is mandatory.
formName string, the form name to be provided if not using with model and ActiveForm. One of form and model OR formName is mandatory.
contentBefore string, any additional content to be displayed before the rendered form fieldset. This is not HTML encoded.
contentAfter string, any additional content to be displayed after the rendered form fieldset. This is not HTML encoded.
attributes array, the most important part of your form builder configuration. This is mandatory. The attributes array needs to be setup as
$attribute => $setting, where:
$attribute string, the attribute name from the model. You can define your own custom (non-model) attribute by assigning $setting['type'] to Form::INPUT_RAW.
$setting array, the attribute settings which allows you to setup the following properties:
type string, the input type for the attribute. Allows you to configure most inputs, widgets, and raw text. Should be one of the values below:
Form::INPUT_TEXT or textInput
Form::INPUT_TEXTAREA or textarea
Form::INPUT_PASSWORD or passwordInput
Form::INPUT_DROPDOWN_LIST or dropDownList
Form::INPUT_LIST_BOX or listBox
Form::INPUT_CHECKBOX or checkbox
Form::INPUT_RADIO or radio
Form::INPUT_CHECKBOX_LIST or checkboxList
Form::INPUT_RADIO_LIST or radioList
Form::INPUT_MULTISELECT or multiselect
Form::INPUT_FILE or fileInput
Form::INPUT_HTML5 or input
Form::INPUT_WIDGET or widget
Form::INPUT_STATIC or staticInput * useful for showing a display-only field
Form::INPUT_HIDDEN or hiddenInput * useful for rendering hidden input
Form::INPUT_HIDDEN_STATIC or hiddenStaticInput * combines a display-only field very similar to INPUT_STATIC along with a HIDDEN input.
Form::INPUT_RAW or raw * useful to set your own free text, HTML markup,or use a Closure function to return value
visible boolean, whether the attribute is visible. One can use this property to control visibility of attributes conditionally.
attributes array, the nested group of sub attributes that will be grouped together. This
configuration will be similar to `attributes`. The label property will be auto set to `false` for each sub attribute.
value string | Closure, the value to be displayed if the type is set to Form::INPUT_RAW. This will display
the raw text from value field if it is a string. If this is a Closure, your anonymous function call should
be of the type: function ($model, $index, $widget) { }, where $model is the current model, $index is the
zero based index of the attribute array list, and $widget is the current widget instance.
staticValue string | Closure, the value to be displayed if the type is set to Form::INPUT_STATIC. If not set, the value will be automatically generated from the value setting above OR from the value of the model attribute. If this is setup as a Closure, your anonymous function call should
be of the type: function ($model, $index, $widget) { }, where $model is the current model, $index is the
zero based index of the attribute array list, and $widget is the current widget instance.
hiddenStaticOptions array, applicable only for Form::INPUT_HIDDEN_STATIC type. This will allow you to setup HTML attributes for the static control container. For Form::INPUT_HIDDEN_STATIC type, the options setting will represent the HTML attributes for the hidden input.
label string | boolean, the custom attribute label. If this is not set, the model attribute label will be automatically used.
If you set it to false, it will not be displayed.
labelSpan int, the grid span width of the label container, which is especially useful for horizontal forms.
If not set this will be derived automatically from the formConfig['labelSpan'] property of $form (ActiveForm).
labelOptions array, the HTML attributes for the label. Will be applied only when NOT using with active form and only if label is set.
prepend string, any markup to prepend before the input. For ActiveForm fields, this content will be prepended before the field group (including label, input, error, hint blocks).
append string, any markup to append before the input. For ActiveForm fields, this content will be appended after the field group (including label, input, error, hint blocks).
container array, HTML attributes for the div container to wrap the input. For ActiveForm, this will envelop the field group (including label, input, error, hint blocks). If not set or empty, no container will be wrapped.
inputContainer array, HTML attributes for the div container to wrap the input control only. If not set or empty, no container will be wrapped. Will be applied only when NOT using with ActiveForm.
fieldConfig array, the additional configuration for the ActiveField. Will use the kartik orm\ActiveField or \kartik orm\ActiveField configuration parameters.
hint string, the hint text to be shown below the active field.
items array, the list of items if input type is one of the following:
Form::INPUT_DROPDOWN_LIST or dropDownList
Form::INPUT_LIST_BOX or listBox
Form::INPUT_CHECKBOX_LIST or checkboxList
Form::INPUT_RADIO_LIST or radioList
Form::INPUT_MULTISELECT or multiselect
enclosedByLabel boolean, whether the input is to be enclosed by label. Applicable only for Form::INPUT_CHECKBOX or Form::INPUT_RADIO. Defaults to true.
html5type string, the type of HTML5 input, if input type is set to Form::INPUT_HTML5.
widgetClass string, the classname if input type is Form::INPUT_WIDGET.
options array, the additional HTML attributes to be applied to the input. These will take in the widget configuration settings if type is set to Form::INPUT_WIDGET.
columnOptions array, override columnOptions setup at Form widget level. This setting makes sense only if columns setting is greater than 1.
attributeDefaults array, the default settings that will be applied for all attributes. The array will be configured
similar to a single attribute setting value in the $attributes array. One will typically default markup and styling like type,
container, prepend, append etc. For example:
// settings for horizontal form used without active form
'attributeDefaults' => [
'type' => Form::INPUT_TEXT,
'labelOptions' => ['class'=>'col-md-2'],
'inputContainer' => ['class'=>'col-md-10'],
]
Note: The settings at the $attributes level will override these default settings.
staticOnly bool, whether the entire form is to be converted to static only (read only) inputs irrespective of the attribute configuration. Defaults to false.
columns integer, the number of columns in which to split the fields horizontally. If not set, defaults to 1 column. This will be auto generated based on number of attributes if autoGenerateColumns is set to true.
autoGenerateColumns boolean, whether to auto calculate and generate the columns based on the count of attributes for each row. If not set, Defaults to false. If the count of attributes is > FormGrid::$gridSize then no further columns will be generated.
columnSize string, the bootstrap device size for rendering each Bootstrap grid column. Applicable Defaults to `Form::SIZE_SMALL`. Can take in one of these options:
Form::SIZE_LARGE or lg
Form::SIZE_MEDIUM or md
Form::SIZE_SMALL or sm
Form::SIZE_TINY or xs
columnOptions array, the HTML attributes for the grid columns. Applicable only if columns is greater than 1. The following special options are
recognized:
colspan integer, the customized grid column span to use if you need assymmetric field columns in your layout. For the default bootstrap grid this is a number between 1 to 12.
rowOptions array, the HTML attributes for the grid rows. Applicable only if columns is greater than 1.
options array, the HTML attributes for the field/attributes container. The following options are additionally recognized:
tag: string, the HTML tag for the container. Defaults to fieldset.
gridSize integer, the bootstrap grid size (maximum number of columns) based on which the bootstrap grid columns will be generated. Defaults to 12.
The Form Builder widget allows you to access the following events for advanced configuration. The extension includes an kartik\builder\ActiveFormEvent class which extends from yii\base\Event and is used to trigger events within the kartik\builder\Form widget. The ActiveFormEvent allows access to the following parameters:
$attribute: string, the attribute being processed
$index: string, the zero based index of the attribute in the configuration array
$eventData: array, the data passed as key value pairs to the event.
The Form widget triggers the following events:
Form::EVENT_BEFORE_PARSE_INPUT or 'eBeforeParseInput': Triggered before parsing the input for each attribute. The $eventData passed includes the attribute settings array for read and write.
Form::EVENT_AFTER_PARSE_INPUT or 'eAfterParseInput': Triggered after parsing the input for each attribute. The $eventData passed includes the rendered attribute input content string for read and write.
Form::EVENT_BEFORE_RENDER_SUB_ATTR or 'eBeforeRenderSubAttr': Triggered before parsing the input and if the attribute has sub attributes defined under it. The $eventData passed includes the attribute settings array for read and write.
Form::EVENT_AFTER_RENDER_SUB_ATTR or 'eAfterRenderSubAttr': Triggered before parsing the input and if the attribute has sub attributes defined under it. The $eventData passed includes the rendered attribute input content string for read and write.
Some scenarios of using the Form Builder are mentioned below:
Setup your attributes array for the form builder. For example you could create a globally accessible method in your model (or any accessible class).
public function getFormAttribs() {
return [
'username'=>['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
'password'=>['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']],
'rememberMe'=>['type'=>Form::INPUT_CHECKBOX],
'actions'=>['type'=>Form::INPUT_RAW, 'value'=>Html::submitButton('Submit', ['class'=>'btn btn-primary'])];
];
}
Create a form instance using \kartik\form\ActiveForm and pass it to the FormBuilder widget along with the model instance.
Let's say you want to display a Bootstrap INLINE Layout for your form
use kartik\form\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_INLINE]);
$fldConfig = ['options' => ['class' => 'form-group mb-3 mt-2 mb-2 mr-2 me-2']];
echo Form::widget([
'model'=>$model,
'form'=>$form,
'attributes'=>[
'username'=>['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...'], 'fieldConfig' => $fldConfig],
'password'=>['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...'], 'fieldConfig' => $fldConfig],
'rememberMe'=>['type'=>Form::INPUT_CHECKBOX],
'actions'=>['type'=>Form::INPUT_RAW, 'value'=>Html::submitButton('Submit', ['class'=>'btn btn-primary ml-2'])]
]
]);
ActiveForm::end();
Pass the columns property to setup the number of Bootstrap grid columns into which the attributes will be divided. For example, if
instead of 1 column, we want the fields to be split into 2 columns for Scenario 1, you set columns to 2.
This would autocalculate the number of rows needed. You would for the Scenario 1 example get 2 rows of fields. The first row will contain the username
and password. The second row will contain one column rememberMe.
use kartik\form\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_VERTICAL]);
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'username'=>['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
'password'=>['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']],
'rememberMe'=>['type'=>Form::INPUT_CHECKBOX, 'label' => 'Remember your settings?'], // custom label
]
]);
echo Html::button('Submit', ['type'=>'button', 'class'=>'btn btn-primary']);
ActiveForm::end();
You may practically need a complex layout, which can have single, double or multi columns within the same form. You may also be planning to use various
input types for your design and place as you want on your layouts. In order to achieve these, you can call the Form::widget multiple times with different settings as described below.
INPUT_RAW example at the end. Note you can use INPUT_RAW type to define your own custom attributes. It
also shows an example of how you can add hints to your active field attributes.
use kartik\form\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_VERTICAL]);
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>2,
'compactGrid'=>true,
'attributes'=>[ // 2 column layout
'username'=>['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
'password'=>['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']]
]
]);
echo Form::widget([ // 1 column layout
'model'=>$model,
'form'=>$form,
'columns'=>1,
'compactGrid'=>true,
'attributes'=>[
'notes'=>['type'=>Form::INPUT_TEXTAREA, 'options'=>['placeholder'=>'Enter notes...']],
]
]);
echo Form::widget([ // nesting attributes together (without labels for children)
'model'=>$model,
'form'=>$form,
'columns'=>2,
'compactGrid'=>true,
'attributes'=>[
'date_range' => [
'label' => 'Date Range',
'attributes'=>[
'begin_date' => [
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\datecontrol\DateControl',
'options'=>[
'options'=>[
'options'=>['placeholder'=>'Date from...']
]
],
],
'end_date'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\datecontrol\DateControl',
'options'=>[
'options'=>[
'options'=>['placeholder'=>'Date to...', 'class'=>'col-md-9']
]
]
],
]
],
'time_range'=>[
'label' => 'Time Range',
'attributes'=>[
'begin_time'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\widgets\TimePicker',
'options'=>['options'=>['placeholder'=>'Time from...']],
],
'end_time'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\widgets\TimePicker',
'options'=>['options'=>['placeholder'=>'Time to...', 'class'=>'col-md-9']]
],
]
],
]
]);
echo Form::widget([ // 3 column layout
'model'=>$model,
'form'=>$form,
'columns'=>3,
'compactGrid'=>true,
'attributes'=>[
'birthday'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\widgets\DatePicker',
'hint'=>'Enter birthday (mm/dd/yyyy)'
],
'state_1'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\select2\Select2',
'options'=>['data'=>$model->typeahead_data],
'hint'=>'Type and select state'
],
'color'=>[
'type'=>Form::INPUT_WIDGET,
'widgetClass'=>'\kartik\color\ColorInput',
'hint'=>'Choose your color'
],
'status'=>[
'type'=>Form::INPUT_RADIO_LIST,
'items'=>[true=>'Active', false=>'Inactive'],
'options'=>['inline'=>true]
],
'brightness'=>[
'type'=>Form::INPUT_WIDGET,
'label'=>Html::label('Brightness (%)'),
'widgetClass'=>'\kartik\range\RangeInput',
'options'=>['width'=>'80%']
],
'actions'=>[
'type'=>Form::INPUT_RAW,
'value'=>'<div style="text-align: right; margin-top: 20px">' .
Html::resetButton('Reset', ['class'=>'btn btn-secondary btn-default']) . ' ' .
Html::button('Submit', ['type'=>'button', 'class'=>'btn btn-primary']) .
'</div>'
],
]
]);
ActiveForm::end();
Extending scenario 3, this scenario depicts a bootstrap horizontal form layout with nesting of attributes to be collated together without labels. It also includes customized labels and editing of the label span and column span widths.
use kartik\form\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_HORIZONTAL, 'formConfig'=>['labelSpan'=>4]]);
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>1,
'attributes'=>[
'address_detail' => [ // complex nesting of attributes along with labelSpan and colspan
'label'=>'Address',
'labelSpan'=>2,
'columns'=>6,
'attributes'=>[
'address'=>[
'type'=>Form::INPUT_TEXT,
'options'=>['placeholder'=>'Enter address...'],
'columnOptions'=>['colspan'=>3],
],
'phone'=>[
'type'=>Form::INPUT_TEXT,
'options'=>['placeholder'=>'Phone...'],
'columnOptions'=>['colspan'=>2],
],
'zip_code'=>[
'type'=>Form::INPUT_TEXT,
'options'=>['placeholder'=>'Zip...']
],
]
]
]
]);
echo Form::widget([ // fields with labels
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'state_1'=>['label'=>'Province 1', 'options'=>['placeholder'=>'Province 1...']],
'state_1a'=>['label'=>'Province 2', 'options'=>['placeholder'=>'Province 2...']],
]
]);
echo Form::widget([ // continuation fields to row above without labels
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'state_2'=>['label'=>'', 'options'=>['placeholder'=>'Province 1 Description...']],
'state_3'=>['label'=>'', 'options'=>['placeholder'=>'Province 2 Description...']],
]
]);
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'status'=>['label'=>'Severity', 'items'=>[0=>'Low', 1=>'Medium', 2=>'High'], 'type'=>Form::INPUT_RADIO_BUTTON_GROUP],
'status_1'=>['label'=>'Categories', 'items'=>[0=>'Group 1', 1=>'Group 2', 2=>'Group 3'], 'type'=>Form::INPUT_CHECKBOX_BUTTON_GROUP]
]
]);
echo Form::widget([ // hide label and extend input to full width
'model'=>$model,
'form'=>$form,
'columns'=>1,
'attributes'=>[
'website'=>[
'label'=>false,
'options'=>[
'placeholder'=>'Enter website (this input fills the width when label is set to false)...'
]
],
]
]);
echo '<div class="text-right text-end">' . Html::resetButton('Reset', ['class'=>'btn btn-secondary btn-default']) . '</div>';
ActiveForm::end();
Extending scenario 4, this scenario depicts a bootstrap horizontal form layout with entire form set to staticOnly/readonly.
use kartik\form\ActiveForm;
use kartik\builder\Form;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_HORIZONTAL, 'formConfig'=>['labelSpan'=>4]]);
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>1,
'attributes'=>[
'address_detail' => [ // complex nesting of attributes along with labelSpan and colspan
'label'=>'Address',
'labelSpan'=>2,
'columns'=>6,
'attributes'=>[
'address'=>[
'type'=>Form::INPUT_HIDDEN_STATIC,
'options'=>['placeholder'=>'Enter address...'],
'columnOptions'=>['colspan'=>3],
],
'phone'=>[
'type'=>Form::INPUT_TEXT,
'options'=>['placeholder'=>'Phone...'],
'columnOptions'=>['colspan'=>2],
],
'zip_code'=>[
'type'=>Form::INPUT_TEXT,
'options'=>['placeholder'=>'Zip...']
],
]
]
]
]);
echo Form::widget([ // fields with labels
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'state_1'=>['label'=>'Province 1', 'options'=>['placeholder'=>'Province 1...']],
'state_1a'=>['label'=>'Province 2', 'options'=>['placeholder'=>'Province 2...']],
]
]);
echo Form::widget([ // continuation fields to row above without labels
'model'=>$model,
'form'=>$form,
'columns'=>2,
'attributes'=>[
'state_2'=>['label'=>'', 'options'=>['placeholder'=>'Province 1 Description...']],
'state_3'=>['label'=>'', 'options'=>['placeholder'=>'Province 2 Description...']],
]
]);
echo Form::widget([ // hide label and extend input to full width
'model'=>$model,
'form'=>$form,
'columns'=>1,
'attributes'=>[
'website'=>['label'=>false, 'options'=>['placeholder'=>'Enter website (this input fills the width when label is set to false)...']],
]
]);
echo '<div class="text-right text-end">' . Html::resetButton('Reset', ['class'=>'btn btn-secondary btn-default']) . '</div>';
ActiveForm::end();
This scenario depicts a bootstrap horizontal form layout. It includes entirely skipping ActiveForm and using it as a normal form without a model.
use yii\helpers\Html;
use kartik\builder\Form;
echo Html::beginForm('', '', ['class'=>'form-horizontal']);
echo Form::widget([
// formName is mandatory for non active forms
// you can get all attributes in your controller
// using $_POST['kvform']
'formName'=>'kvform',
// default grid columns
'columns'=>2,
// set global attribute defaults
'attributeDefaults'=>[
'type'=>Form::INPUT_TEXT,
'labelOptions'=>['class'=>'col-md-3'],
'inputContainer'=>['class'=>'col-md-9'],
'container'=>['class'=>'form-group mb-3'],
],
'attributes'=>[
'fld1'=>['label'=>'Name', 'value'=>'Kartik'],
'fld2'=>['label'=>'Email', 'value'=>'info@solutions.com'],
'fld3'=>['label'=>'From Date', 'type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\widgets\DatePicker'],
'fld4'=>['label'=>'To Date', 'type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\widgets\DatePicker'],
'fld5'=>['label'=>'Details', 'type'=>Form::INPUT_TEXTAREA],
'fld6'=>['label'=>'Remarks', 'type'=>Form::INPUT_TEXTAREA],
'fld7'=>[
'label'=>'Severity',
'items'=>[0=>'Low', 1=>'Medium', 2=>'High'],
'type'=>Form::INPUT_RADIO_BUTTON_GROUP
],
'fld8'=>[
'label'=>'Categories',
'items'=>[0=>'Group 1', 1=>'Group 2', 2=>'Group 3'],
'type'=>Form::INPUT_CHECKBOX_BUTTON_GROUP
],
]
]);
echo Html::endForm();
Extension of scenario 6 to include static only forms for non model based scenarios. Also includes configuration of static values to override and define your own static values in static only mode.
use yii\helpers\Html;
use kartik\builder\Form;
echo Html::beginForm('', '', ['class'=>'form-horizontal']);
echo Form::widget([
// formName is mandatory for non active forms
// you can get all attributes in your controller
// using $_POST['kvform']
'formName'=>'kvform',
// set to static only
'staticOnly'=>true,
// default grid columns
'columns'=>2,
// set global attribute defaults
'attributeDefaults'=>[
'type'=>Form::INPUT_TEXT,
'labelOptions'=>['class'=>'col-md-3'],
'inputContainer'=>['class'=>'col-md-9'],
'container'=>['class'=>'form-group mb-3'],
],
'attributes'=>[
'fld1'=>['label'=>'Name', 'value'=>'Kartik'],
'fld2'=>['label'=>'Email', 'value'=>'info@solutions.com'],
'fld3'=>['label'=>'From Date', 'staticValue'=>'<em>(not set)</em>', 'type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\widgets\DatePicker'],
'fld4'=>['label'=>'To Date', 'staticValue'=>'<em>(not set)</em>', 'type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\widgets\DatePicker'],
'fld5'=>['label'=>'Details', 'staticValue'=>'<em>(not set)</em>', 'type'=>Form::INPUT_TEXTAREA],
'fld6'=>['label'=>'Remarks', 'staticValue'=>'<em>(not set)</em>', 'type'=>Form::INPUT_TEXTAREA],
]
]);
echo Html::endForm();
Comments & Discussion
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.