Color picker input (default). Supported on Firefox, Chrome, and Opera.
Date picker input. Supported on Safari, Chrome, and Opera.

Range input (default). Supported on IE10+, Firefox, Chrome, Safari and Opera.
Month picker input. Supported on Safari, Chrome, and Opera.

Color picker input (advanced). Supported on IE10+, Firefox, Chrome, Safari and Opera.
Week picker input. Supported on Safari, Chrome, and Opera.

0%100%Value:%
Range input (advanced). Supported on IE10+, Firefox, Chrome, Safari and Opera.
Time picker input. Supported on Safari, Chrome, and Opera.

Email validation input. Supported on IE10+, Firefox, Chrome, and Opera.
Local date time picker input (no time zone). Supported on Safari, Chrome, and Opera.

URL validation input. Supported on IE10+, Firefox, Chrome, and Opera.
Date time picker input (with time zone). Supported on Safari and Opera.

Number input with step/spinner functionality. Supported on most modern browsers.
use kartik\helpers\Html;
use kartik\widgets\ActiveForm;

$form = ActiveForm::begin(['formConfig'=>['showLabels'=>false]]);  

echo $form->field($model, 'image')->
    input('color', ['style' => 'width: 50px; cursor: pointer;'])->
    hint('Color picker input. Supported on Firefox, Chrome, and Opera.');

echo $form->field($model, 'contrast')->
    input('range', ['min'=>1, 'max'=> 10, 'step'=>1, 'placeholder'=>'Enter scale 1-10...'])->
    hint('Range input. Supported on IE10+, Firefox, Chrome, Safari and Opera.');

/* Uses ColorInput widget */
echo $form->field($model, 'color')->
    widget(\kartik\widgets\ColorInput::classname(), ['options' => ['placeholder'=>'Enter scale 1-10...']])->
    hint('Color picker input (advanced). Supported on IE10+, Firefox, Chrome, Safari and Opera.');

/* Uses RangeInput widget */
echo $form->field($model, 'brightness')->widget(\kartik\widgets\RangeInput::classname(), [
        'html5Options' => ['min'=>0, 'max'=> 100, 'step'=>1], 
        'options' => ['placeholder' => 'Adjust...', 'class' => 'text-center'], 
        'addon' => [
            'prepend' => ['content'=>'<span class="text-danger">0%</span>'],
            'preCaption' => '<span class="input-group-addon"><span class="text-success">100%</span></span><span class="input-group-addon"><strong>Value:</strong></span>',
            'append' => ['content'=>'%']
    ])->
    hint('Range input (advanced). Supported on IE10+, Firefox, Chrome, Safari and Opera.');

echo $form->field($model, 'email_1')->
    input('email', ['placeholder'=>'Enter a valid email...'])->
    hint('Email validation input. Supported on IE10+, Firefox, Chrome, and Opera.');

echo $form->field($model, 'website')->
    input('url', ['placeholder'=>'Enter a valid url...'])->
    hint('URL validation input. Supported on IE10+, Firefox, Chrome, and Opera.');

echo $form->field($model, 'rating')->
    input('number', ['min'=>1, 'max'=> 10, 'step'=>1, 'placeholder'=>'Enter rating 1-10...'])->
    hint('Number input with step/spinner functionality. Supported on IE10+, Firefox, Chrome, Safari and Opera.');

echo $form->field($model, 'birthday')->
    input('date', ['placeholder'=>'Enter a valid date...'])->
    hint('Date picker input. Supported on Safari, Chrome, and Opera.');

echo $form->field($model, 'month')->
    input('month', ['placeholder'=>'Enter a valid month...'])->
    hint('Month picker input. Supported on Safari, Chrome, and Opera.');

echo $form->field($model, 'week')->
    input('week', ['placeholder'=>'Enter a valid week...'])->
    hint('Week picker input. Supported on Safari, Chrome, and Opera.');

echo $form->field($model, 'event_time')->
    input('time', ['placeholder'=>'Enter a valid time...'])->
    hint('Time picker input. Supported on Safari, Chrome, and Opera.');

echo $form->field($model, 'end_time')->
    input('datetime-local', ['placeholder'=>'Enter a valid date-time...'])->
    hint('Local date time picker input (no time zone). Supported on Safari, Chrome, and Opera.');

echo $form->field($model, 'date_1')->
    input('datetime', ['placeholder'=>'Enter a valid date-time...'])->
    hint('Date time picker input (with time zone). Supported on Safari and Opera.');

echo Html::submitButton('Submit', ['class' => 'btn btn-primary']);
echo Html::resetButton('Reset', ['class' => 'btn btn-default']);

ActiveForm::end()