فرم های پلاگین توضیحات عنوان صفحه در اینجا می رود...

<!-- required js / css -->
<link href="assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<!-- default html -->
<input type="text" class="form-control" id="datepicker" placeholder="dd/mm/yyyy" />

<!--component html -->
<div class="input-group">
  <input type="text" class="form-control" id="datepicker" placeholder="with input group addon" />
  <label class="input-group-append mb-0" for="datepicker">
    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
  </label>
</div>

<!-- range html -->
<div class="input-group input-daterange" id="datepicker">
  <input type="text" class="form-control" name="start" placeholder="start date" />
  <span class="input-group-append input-group-prepend">
    <span class="input-group-text">to</span>
  </span>
  <input type="text" class="form-control" name="end" placeholder="end date" />
</div>

<!-- script -->
<script>
  $('#datepicker').datepicker({
    autoclose: true
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

<!-- html -->
<div class="input-group" id="daterange">
  <input type="text" name="daterange" class="form-control" value="" placeholder="برای انتخاب دامنه تاریخ کلیک کنید" />
  <span class="input-group-append">
    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
  </span>
</div>

<!-- script -->
<script>
  $('#daterange').daterangepicker({
    opens: 'right',
    format: 'MM/DD/YYYY',
    separator: ' to ',
    startDate: moment().subtract('days', 29),
    endDate: moment(),
    minDate: '01/01/2012',
    maxDate: '12/31/2018',
  }, function (start, end) {
    $('#daterange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  });
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>

<!-- html -->
<div class="input-group bootstrap-timepicker timepicker">
  <input id="timepicker" type="text" class="form-control" />
  <span class="input-group-addon input-group-append">
    <span class="input-group-text"><i class="fa fa-clock"></i></span>
  </span>
</div>

<!-- script -->
<script>
  $('#timepicker').timepicker();
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

<!-- default -->
<select class="selectpicker form-control" data-style="btn-default">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<!-- live search -->
<select class="selectpicker form-control" data-style="btn-default" data-live-search="true">...</select>

<!-- multiple -->
<select class="selectpicker form-control" data-style="btn-default" multiple data-max-options="3">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

<!-- default -->
<input type="text" value="#0088cc" class="form-control" id="colorpicker" />

<!-- with addon -->
<div class="input-group colorpicker-component" id="colorpicker">
  <input type="text" value="#007aff" class="form-control" />
  <span class="input-group-append">
    <span class="input-group-text colorpicker-input-addon"><i></i></span>
  </span>
</div>

<!-- script -->
<script>
  $('#colorpicker').colorpicker();
</script>

<!-- required js / css -->
<link href="assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

<!-- default -->
<input type="text" class="form-control" id="tagsinput" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

<!-- required js / css -->
<link href="assets/plugins/bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-slider/dist/bootstrap-slider.min.js"></script>

<!-- default -->
<input type="text" id="slider" class="form-control" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

<!-- script -->
<script>
  $('#slider').bootstrapSlider();
</script>

<!-- required js -->
<script src="assets/plugins/bootstrap-3-typeahead/bootstrap3-typeahead.js"></script>

<!-- html -->
<input type="text" value="" placeholder="Type 'a'" class="form-control" id="typeahead" />

<!-- script -->
<script>
  $('#typeahead').typeahead({
    source: [
      { id: '1', name: 'ActionScript' },
      { id: '2', name: 'AppleScript' },
      ...
    ],
    autoSelect: true
  });
</script>

<!-- required js -->
<script src="assets/plugins/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>

<!-- default -->
<div class="form-group" id="pwdstrength-container">
  <label class="d-flex align-items-center">
    Password <span class="text-danger">*</span>
    <div class="pwstrength_viewport_progress ml-auto width-200"></div>
  </label>
  <input type="password" id="pwstrength" placeholder="password" class="form-control" />
</div>

<!-- script -->
<script>
  var options = {};
  options.ui = {
    container: "#pwdstrength-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
      progress: ".pwstrength_viewport_progress"
    },
    progressExtraCssClasses: "progress-sm"
  };
  options.common = {
    debug: true,
    onLoad: function () {
      $('#messages').text('Start typing password');
    }
  };
  $('#pwstrength').pwstrength(options);
</script>

<!-- required js -->
<script src="assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>

<!-- html -->
<input type="text" id="masked-input" class="form-control" placeholder="mm/dd/yyyy" />

<!-- script -->
<script>
  $('#masked-input').mask('99/99/9999');
</script>

<!-- required css / js -->
<link href="assets/plugins/summernote/dist/summernote.css" rel="stylesheet" />
<link href="assets/plugins/summernote/dist/summernote-bs4.css" rel="stylesheet" />
<script src="assets/plugins/summernote/dist/summernote.min.js"></script>
<script src="assets/plugins/summernote/dist/summernote-bs4.min.js"></script>

<!-- html -->
<textarea name="text" class="summernote" id="contents" title="Contents">...</textarea>

<!-- script -->
<script>
  $('.summernote').summernote({
    height: 300
  });
</script>