Advanced Forms

Select2
<!-- Style -->
<link rel="stylesheet" href="vendors/select2/css/select2.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/select2/js/select2.min.js"></script>
<select class="select2-example">
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>
$('.select2-example').select2({
    placeholder: 'Select'
});

Multiple use

<select class="select2-example" multiple>
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>

Multiple and categorized use

<select class="select2-example">
  <option>Select</option>
  <optgroup label="Cities">
    <option value="Wonosari">Wonosari</option>
    <option value="Antipolo">Antipolo</option>
    <option value="Lesuhe">Lesuhe</option>
    <option selected value="Sunzhuang">Sunzhuang</option>
    <option value="Hongchuan">Hongchuan</option>
  </optgroup>
  <optgroup label="Countries">
    <option value="France">France</option>
    <option selected value="Brazil">Brazil</option>
    <option selected value="Yemen">Yemen</option>
    <option selected value="United States">United States</option>
    <option value="China">China</option>
    <option value="Argentina">Argentina</option>
    <option value="Bulgaria">Bulgaria</option>
  </optgroup>
</select>
Range Slider

Set min value, max value and start point

<!-- Style -->
<link rel="stylesheet" href="vendors/range-slider/css/ion.rangeSlider.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/range-slider/js/ion.rangeSlider.min.js"></script>
<input type="text" id="rangeSlider-example">
$("#rangeSlider-example").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550,
    skin: "round"
});

Set type to double, specify range, show grid and add a prefix "$"

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$",
    skin: "round"
});

Add a step to previous config

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250,
    skin: "round"
});

Force fractional values, using fractional step 0.1

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: -12.8,
    max: 12.8,
    from: -3.2,
    to: 3.2,
    step: 0.1,
    skin: "round"
});

Values array could be anything, even strings

$("#rangeSlider-example").ionRangeSlider({
    grid: true,
    from: new Date().getMonth(),
    values: [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ],
    skin: "round"
});

Advanced demo

Taşınmayı önlemek için kilitleme kolları

$("#rangeSlider-example").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 777,
    step: 1, // default 1 (set step)
    grid: true, // default false (enable grid)
    grid_num: 4, // default 4 (set number of grid cells)
    grid_snap: false, // default false (snap grid to step)
    skin: "round"
});
Tags Input
<!-- Style -->
<link rel="stylesheet" href="vendors/tagsinput/bootstrap-tagsinput.css" type="text/css">

<!-- Javascript -->
<script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>
<input type="text" class="form-control tagsinput-example" placeholder="Tags" value="HTML5, CSS3, JavaScript, Laravel">
$("input.tagsinput-example").tagsinput('items');
Input Mask
<!-- Javascript -->
<script src="vendors/input-mask/jquery.mask.js"></script>
<input type="text" data-input-mask="phone" class="form-control" placeholder="(555) 555-5555">
$('[data-input-mask="phone"]').mask('(000) 000-0000');
<input type="text" data-input-mask="date" class="form-control" placeholder="2019/12/05">
$('[data-input-mask="date"]').mask('0000/00/00/');
<input type="text" data-input-mask="time" class="form-control" placeholder="00:00:00">
$('[data-input-mask="time"]').mask('00:00:00');
<input type="text" data-input-mask="money" class="form-control" placeholder="54,28">
$('[data-input-mask="money"]').mask('#.##0,00', {reverse: true});
<input type="text" data-input-mask="ip_address" class="form-control" placeholder="192.168.544.444">
$('[data-input-mask="ip_address"]').mask('099.099.099.099');