How to Add Class to Form in Yii Framework

How to add class to ActiveForm in Yii 2.0 framework?

In Yii2 I don't think 'htmlOptions' works. Just 'options' is correct, e.g.

<?php
    $form = ActiveForm::begin(
        [
            'action' => '/login',
            'options' => [
                'class' => 'userform'
             ]
        ]
    );
    // ... add all your inputs here for example:
    echo $form->field($model, 'login');
    ActiveForm::end();
?>

Yii2 - How To Add a CSS class to an ActiveForm Field

You can add it with

<?= $form->field($model, 'url')->textInput(['maxlength' => 255, 'class' => 'your class'])->label(false); ?>

As a rule you can pass html elements when telling activeField what type it should be. The default is textInput so that is why your code works, but if you want to change the input then you have to explicitly tell it the type of input.

http://www.yiiframework.com/doc-2.0/guide-input-forms.html

How to add class to Form in Yii framework?

You need to pass an htmlOptions property, like this:

<?php $form=$this->beginWidget('CActiveForm', array(
                        'id'=>'mail-list-addmail-form',
                        'enableAjaxValidation'=>false,
                        'htmlOptions'=>array(
                          'class'=>'subscribe_form',
                        )
                    )); ?>

from http://www.yiiframework.com/doc/api/1.1/CActiveForm#htmlOptions-detail

How to add css class to form-group div of ActiveField in Yii2?

if you are looking to add the class to all the group divs mean all the div that have the class form-group then you can use the fieldConfig option of the ActiveForm or if you want it for one specific field then you can use the options option of the $form->field() as the 3rd parameter

For the whole Form

$form = yii\widgets\ActiveForm::begin([
            'fieldConfig' => [
                'options' => [
                    'class' => 'my-group'
                ]
            ]
        ]);

For Single Field

echo $form->field($model, 'name', ['options' => ['class' => 'my-class']])->textInput();

Conversion

About converting your above HTML using ActiveForm the following should work you can use template option of the $form->field() 3rd parameter to add your custom icon after the input, along with other, see below will create your desired HTML

echo $form->field($model, 'date', [
    'options' => [
        'class' => 'form-group has-icon has-label'
    ],
    'inputOptions' => [
        'class' => 'form-control'
    ],
    'template' => '{label}{input}<span class="form-control-icon"><i class="fa fa-map-marker"></i></span>{error}'
])->widget(yii\jui\DatePicker::class, [
    'id' => 'created_at',
    'options' => [
        'placeholder' => 'Airport or Anywhere'
    ]
]);

You will have something like below

How to add a css class to a ActiveForm field in Yii2

You should simply add the needed class :

<?= $form->field($model, 'name_pu')->textInput(['maxlength' => true, 'class' => 'form-control punjabi']) ?>

How to add a class to a Yii form label?

As the doc says, $htmlOptions is an array of additional HTML attributes. The keys are the attribute, while the values are the attribute values, so to add a class attribute to the label:

<?php echo $form->label( $model,'username', array('class'=>'className') ); ?>

Yii. How to add css error class to input on form submit?

To have AJAX validation also, you should add something more or less like this:

<?php $form=$this->beginWidget('CActiveForm', array(
          'id'=>'contact-form',
          'enableClientValidation'=>true,
          'clientOptions'=>array(
              'validateOnSubmit'=>true,
              'afterValidate' => 'js:function(form, data, hasError) { 
                  if(hasError) {
                      for(var i in data) $("#"+i).addClass("error_input");
                      return false;
                  }
                  else {
                      form.children().removeClass("error_input");
                      return true;
                  }
              }',
              'afterValidateAttribute' => 'js:function(form, attribute, data, hasError) {
                  if(hasError) $("#"+attribute.id).addClass("error_input");
                      else $("#"+attribute.id).removeClass("error_input"); 
              }'
          ),
        )); ?>

How to add contextual classes in Yii 2 ActiveField / ActiveForm?

Yii automatically adds has-error class in case of validation errors.
If you want to add any CSS-class to ActiveField container then you can use options property. For example:

<?= $form->field($model, 'field', [
        'options' => [
            'class' => 'form-group has-error',
        ],
    ])
    ->textInput(['maxlength' => true, 'placeholder' => 'Erroneous input'])
    ->label('Erroneous label')
    ->hint('Dummy hint');
?>

---

Related Topics