HTML5 Input Demo

Color picker input (default style).

Color picker input (bootstrap style).

▼

Color picker input (advanced Colorinput widget by Krajee).

Range input (default style).

Range input (bootstrap style).

100%

Range input (advanced RangeInput widget by Krajee).

Date picker input.

Month picker input.

Week picker input.

Local date time picker input (no time zone).

Time picker input.

Number input with step/spinner functionality.

Phone validation input.

Email validation input.

URL validation input.

use kartik\helpers\Html;
use kartik\form\ActiveForm;
<div class="card p-3">
    <?php
    $form = ActiveForm::begin(['formConfig' => ['showLabels' => false]]);
    ?>
    <div class="row">
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'image')->input('color', ['class' => 'default-color'])->hint('Color picker input (default style).') ?>
        </div>
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'color_1')->input('color', ['class' => 'form-control-color'])->hint('Color picker input (bootstrap style).') ?>
        </div>
        <div class="col-sm-4 col-12">
            <?= $form->field($model, 'color')->widget(ColorInput::class, ['options' => ['placeholder' => 'Enter scale 1-10...']])->hint('Color picker input (advanced Colorinput widget by Krajee).') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'brightness')->input('range', ['class' => 'default-range', 'min' => 0, 'max' => 100, 'step' => 1, 'placeholder' => 'Enter scale 0-100...'])->hint('Range input (default style).') ?>
        </div>
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'contrast')->input('range', ['class' => 'form-control-range', 'min' => 0, 'max' => 100, 'step' => 1, 'placeholder' => 'Enter scale 0-100...'])->hint('Range input (bootstrap style).') ?>
        </div>
        <div class="col-sm-4 col-12">
        <?=
        $form->field($model, 'hue')->widget(RangeInput::class, [
            'html5Options' => ['min' => 0, 'max' => 100, 'step' => 1, 'style' => 'min-width: 120px'],
            'options' => ['placeholder' => 'Adjust...', 'class' => 'text-center'],
            'addon' => [
                'prepend' => ['content' => '<span class="text-danger">0%</span>'],
                'preCaption' => '{$preCaption}',
                'append' => ['content' => '%']
            ]
        ])->hint('Range input (advanced RangeInput widget by Krajee).') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'birthday')->input('date', ['placeholder' => 'Enter a valid date...'])->hint('Date picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'month')->input('month', ['placeholder' => 'Enter a valid month...'])->hint('Month picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'week')->input('week', ['placeholder' => 'Enter a valid week...'])->hint('Week picker input.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'end_time')->input('datetime-local', ['placeholder' => 'Enter a valid date-time...'])->hint('Local date time picker input (no time zone).') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'event_time')->input('time', ['placeholder' => 'Enter a valid time...'])->hint('Time picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'rating')->input('number', ['min' => 1, 'max' => 10, 'step' => 1, 'placeholder' => 'Enter rating 1-10...'])->hint('Number input with step/spinner functionality.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'phone')->input('tel', ['placeholder' => 'Enter a valid phone...'])->hint('Phone validation input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'email_1')->input('email', ['placeholder' => 'Enter a valid email...'])->hint('Email validation input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'website')->input('url', ['placeholder' => 'Enter a valid url...'])->hint('URL validation input.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-6">
            <div class="mb-2" style="float:right">
                <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
                <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
            </div>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div>

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.

Comments & Discussion

Note