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');