Evince

Form Elements

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="plugins/summernote-master/summernote.min.js"></script>
<script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script src="plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="plugins/bootstrap-clockpicker/js/bootstrap-clockpicker.min.js"></script>
<script src="js/pages/form-elements.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy

<link rel="stylesheet" href="plugins/summernote-master/summernote.css" />
<link rel="stylesheet" href="plugins/bootstrap-datepicker/css/datepicker.css" />
<link rel="stylesheet" href="plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css" />
<link rel="stylesheet" href="plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" />
<link rel="stylesheet" href="plugins/bootstrap-clockpicker/css/bootstrap-clockpicker.min.css" />

Basic Form

We'll never share your email with anyone else.
copy

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-theme">Submit</button>
</form>

Horizontal Form

Checkbox
copy

<form>
    <div class="form-group row">
        <label for="inputEmail3" class="col-xl-3 col-lg-4 col-form-label">Email</label>
        <div class="col-xl-9 col-lg-8">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword3" class="col-xl-3 col-lg-4 col-form-label">Password</label>
        <div class="col-xl-9 col-lg-8">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <fieldset class="form-group">
        <div class="row">
            <label class="col-form-label col-xl-3 col-lg-4 pt-0">Radios</label>
            <div class="col-xl-9 col-lg-8">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="">
                    <label class="form-check-label" for="gridRadios1">
                        First radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                    <label class="form-check-label" for="gridRadios2">
                        Second radio
                    </label>
                </div>
                <div class="form-check disabled">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="">
                    <label class="form-check-label" for="gridRadios3">
                        Third disabled radio
                    </label>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-xl-3 col-lg-4">Checkbox</div>
        <div class="col-xl-9 col-lg-8">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck1">
                <label class="form-check-label" for="gridCheck1">
                    Example checkbox
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-xl-9 col-lg-8 offset-xl-3 offset-lg-4">
            <button type="submit" class="btn btn-success">Sign in</button>
        </div>
    </div>
</form>

Inline Form

@
copy

<form class="form-inline">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
            <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>

    <div class="form-check mb-2 mr-sm-2">
        <input class="form-check-input" type="checkbox" id="inlineFormCheck">
        <label class="form-check-label" for="inlineFormCheck">
            Remember me
        </label>
    </div>

    <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

File browser

copy

<form class="form-inline">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
    </div>
</form>

Custom Form

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
copy

<form class="needs-validation" novalidate>
    <div class="form-row">
        <div class="col-md-4 mb-3">
            <label for="validationCustom01">First name</label>
            <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <label for="validationCustom02">Last name</label>
            <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <label for="validationCustomUsername">Username</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                </div>
                <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                    Please choose a username.
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-6 mb-3">
            <label for="validationCustom03">City</label>
            <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
            <div class="invalid-feedback">
                Please provide a valid city.
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <label for="validationCustom04">State</label>
            <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
            <div class="invalid-feedback">
                Please provide a valid state.
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <label for="validationCustom05">Zip</label>
            <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
            <div class="invalid-feedback">
                Please provide a valid zip.
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <button class="btn btn-danger" type="submit">Submit form</button>
</form>

Form Elements

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

email@example.com

@
.00
$
.00
copy

<form class="form-horizontal">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Default</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" placeholder="Default input">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="inputPassword5">Password</label>
        <div class="col-sm-10">
            <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
            <small id="passwordHelpBlock" class="form-text text-muted">
                                                  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                                                </small>
        </div>

    </div>
    <div class="form-group row">
        <label for="input-placeholder" class="col-sm-2 col-form-label">Placeholder</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-placeholder" placeholder="placeholder">
        </div>
    </div>
    <div class="form-group row">
        <label for="input-rounded" class="col-sm-2 col-sm-2 col-form-label">Rounded Input</label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-rounded" id="input-rounded">
        </div>
    </div>
    <div class="form-group row">
        <label for="input-disabled" class="col-sm-2 col-form-label">Disabled Input</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-disabled" placeholder="You can't type here..." disabled>
        </div>
    </div>
    <div class="form-group row">
        <label for="input-readonly" class="col-sm-2 col-form-label">ReadOnly Input</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-readonly" placeholder="This is readonly input..." readonly>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Static Control</label>
        <div class="col-sm-10">
            <p class="form-control-static mt-1">email@example.com</p>
        </div>
    </div>
    <div class="form-group row">
        <label for="input-password" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" name="password" class="password form-control" id="input-password" placeholder="Password">
        </div>
    </div>
    <div class="form-group row has-success">
        <label for="input-success" class="col-sm-2 col-form-label">Input with success</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-success">
        </div>
    </div>
    <div class="form-group row has-warning">
        <label for="input-warning" class="col-sm-2 col-form-label">Input with warning</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-warning">
        </div>
    </div>
    <div class="form-group row has-error">
        <label for="input-error" class="col-sm-2 col-form-label">Input with error</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input-error">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Checkboxes</label>
        <div class="col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox">Unchecked
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" checked>Checked
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" checked disabled>Checked &amp; Disabled
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" disabled>Disabled
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Select</label>
        <div class="col-sm-10">
            <select class="form-control mb-3">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <select multiple class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Control sizing</label>
        <div class="col-sm-10">
            <input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
            <input class="form-control mb-3" type="text" placeholder="Default input">
            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Column sizing</label>
        <div class="col-sm-10">
            <div class="row">
                <div class="col-md-2">
                    <input type="text" class="form-control" placeholder=".col-md-2">
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" placeholder=".col-md-3">
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" placeholder=".col-md-4">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Input groups</label>
        <div class="col-sm-10">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">@</div>
                </div>
                <input type="text" class="form-control" id="basic-addon1" placeholder="Username">
            </div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="basic-addon2">
                <div class="input-group-prepend last">
                    <div class="input-group-text">.00</div>
                </div>
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">$</div>
                </div>
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                <div class="input-group-prepend last">
                    <div class="input-group-text">.00</div>
                </div>
            </div>

            <div class="input-group">

                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox" aria-label="...">
                    </div>
                </div>

                <input type="text" class="form-control" aria-label="...">
            </div>
        </div>

    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Button addons</label>
        <div class="col-sm-10">
            <div class="input-group mb-3">
                <span class="input-group-prepend">
                                                        <button class="btn btn-outline-primary" type="button">Go!</button>
                                                    </span>
                <input type="text" class="form-control">
            </div>
            <div class="input-group mb-3">
                <input type="text" class="form-control">
                <span class="input-group-prepend last">
                                                        <button class="btn btn-success" type="button">Go!</button>
                                                    </span>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-btn input-group-prepend">

                    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control" aria-label="...">
            </div>
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                <div class="input-group-btn input-group-prepend last">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Date Picker</label>
        <div class="col-sm-10">
            <input type="text" class="form-control date-picker">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Time Picker</label>
        <div class="col-sm-10">
            <div class="input-group input-append">
                <input id="timepicker1" type="text" class="form-control">
                <span class="input-group-prepend last add-on"><span class="input-group-text"><i class="fas fa-clock"></i></span></span>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Color Picker</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="cp1" value="#d43e3e">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">RGBA</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="cp2" value="rgba(68,89,204,1)" data-color-format="rgba">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Tags Input</label>
        <div class="col-sm-10">
            <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Wysiwyg</label>
        <div class="col-sm-10">
            <div class="summernote"></div>
        </div>
    </div>
</form>

Copyright © 2020 Evince All rights reserved.

General Settings
  • Notifications
  • Activity log
  • Automatic updates
  • Allow backups
Account Settings
  • Chat
  • Incognito mode
  • Public profile
Noah 2h ago
02/03/2019 5:58PM
Hello
Hello!
03/02/2019 5:18AM
lorem
ipsum dolor sit amet