templates/form_advanced/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.                             <!-- PAGE-HEADER -->
  5.                             <div class="page-header">
  6.                                 <div>
  7.                                     <h1 class="page-title">Form Elements Advanced</h1>
  8.                                 </div>
  9.                                 <div class="ms-auto pageheader-btn">
  10.                                     <ol class="breadcrumb">
  11.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Forms</a></li>
  12.                                         <li class="breadcrumb-item active" aria-current="page">Form Advanced</li>
  13.                                     </ol>
  14.                                 </div>
  15.                             </div>
  16.                             <!-- PAGE-HEADER END -->
  18.                             <!-- ROW -->
  19.                             <div class="row">
  20.                                 <div class="col-md-12">
  21.                                     <div class="card">
  22.                                         <div class="card-header border-bottom">
  23.                                             <h3 class="card-title">Dropdowns Select</h3>
  24.                                         </div>
  25.                                         <div class="card-body">
  26.                                             <div class="example">
  27.                                                 <div class="form-group">
  28.                                                     <label class="form-label" for="default-dropdown">Default Select</label>
  29.                                                     <select name="country" class="form-control form-select" id="default-dropdown" data-bs-placeholder="Select Country">
  30.                                                         <option label="Choose one"></option>
  31.                                                         <option value="br">Brazil</option>
  32.                                                         <option value="cz">Czech Republic</option>
  33.                                                         <option value="de">Germany</option>
  34.                                                         <option value="pl">Poland</option>
  35.                                                     </select>
  36.                                                 </div>
  37.                                                 <div class="form-group">
  38.                                                     <label class="form-label">Basic Select2</label>
  39.                                                     <select class="form-control select2 form-select" data-placeholder="Choose one">
  40.                                                         <option label="Choose one"></option>
  41.                                                         <option value="1">Chuck Testa</option>
  42.                                                         <option value="2">Sage Cattabriga-Alosa</option>
  43.                                                         <option value="3">Nikola Tesla</option>
  44.                                                         <option value="4">Cattabriga-Alosa</option>
  45.                                                         <option value="5">Nikola Alosa</option>
  46.                                                     </select>
  47.                                                 </div>
  48.                                                 <div class="form-group">
  49.                                                     <label class="form-label">Select2 With Search</label>
  50.                                                     <select class="form-control select2-show-search form-select" data-placeholder="Choose one">
  51.                                                         <option label="Choose one"></option>
  52.                                                         <option value="1">Chuck Testa</option>
  53.                                                         <option value="2">Sage Cattabriga-Alosa</option>
  54.                                                         <option value="3">Nikola Tesla</option>
  55.                                                         <option value="4">Cattabriga-Alosa</option>
  56.                                                         <option value="5">Nikola Alosa</option>
  57.                                                         <option value="6">Chuck Testa</option>
  58.                                                         <option value="7">Sage Cattabriga-Alosa</option>
  59.                                                         <option value="8">Nikola Tesla</option>
  60.                                                     </select>
  61.                                                 </div>
  62.                                                 <div class="form-group">
  63.                                                     <label class="form-label">Multiple Select</label>
  64.                                                     <select multiple class="form-control select2-show-search form-select" data-placeholder="Choose one">
  65.                                                         <option label="Choose one"></option>
  66.                                                         <option value="1">Chuck Testa</option>
  67.                                                         <option value="2">Sage Cattabriga-Alosa</option>
  68.                                                         <option value="3">Nikola Tesla</option>
  69.                                                         <option value="4">Cattabriga-Alosa</option>
  70.                                                         <option value="5">Nikola Alosa</option>
  71.                                                         <option value="6">Chuck Testa</option>
  72.                                                         <option value="7">Sage Cattabriga-Alosa</option>
  73.                                                         <option value="8">Nikola Tesla</option>
  74.                                                     </select>
  75.                                                 </div>
  76.                                                 <div class="form-group">
  77.                                                     <label class="form-label">Select2 Disabled</label>
  78.                                                     <select class="form-control select2-show-search form-select" data-placeholder="Choose one" disabled>
  79.                                                         <option label="Choose one"></option>
  80.                                                         <option value="1">Chuck Testa</option>
  81.                                                         <option value="2">Sage Cattabriga-Alosa</option>
  82.                                                         <option value="3">Nikola Tesla</option>
  83.                                                         <option value="4">Cattabriga-Alosa</option>
  84.                                                         <option value="5">Nikola Alosa</option>
  85.                                                         <option value="6">Chuck Testa</option>
  86.                                                         <option value="7">Sage Cattabriga-Alosa</option>
  87.                                                         <option value="8">Nikola Tesla</option>
  88.                                                     </select>
  89.                                                 </div>
  90.                                             </div>
  91.                                         </div>
  92.                                     </div>
  93.                                 </div>
  94.                             </div>
  95.                             <!-- ROW CLOSED -->
  97.                             <!-- ROW -->
  98.                             <div class="row">
  99.                                 <div class="col-md-12">
  100.                                     <div class="card">
  101.                                         <div class="card-header border-bottom">
  102.                                             <h3 class="card-title">Select2 Dropdown Styles</h3>
  103.                                         </div>
  104.                                         <div class="card-body">
  105.                                             <div class="example">
  106.                                                 <div class="row">
  107.                                                     <div class="col-sm-12">
  108.                                                         <div class="form-group">
  109.                                                             <label class="form-label">Select2 Style-01: </label>
  110.                                                             <ul>
  111.                                                                 <li class="select-client">
  112.                                                                     <select class="form-control select2-style1" data-placeholder="Choose One">
  113.                                                                         <option label="Choose one"></option>
  114.                                                                         <option value="1">Angeline Julliet</option>
  115.                                                                         <option value="2">Helena Rose</option>
  116.                                                                         <option value="13">Daniel Obrien</option>
  117.                                                                         <option value="15">Jorah Randy</option>
  118.                                                                         <option value="3">Emma Watson</option>
  119.                                                                         <option value="5">Bonny Benett</option>
  120.                                                                         <option value="7">Jessie Spears</option>
  121.                                                                         <option value="9">Skyler Hilda</option>
  122.                                                                         <option value="11">Randy Orton</option>
  123.                                                                         <option value="14">Benjamin Button</option>
  124.                                                                     </select>
  125.                                                                 </li>
  126.                                                             </ul>
  127.                                                         </div>
  128.                                                     </div>
  129.                                                     <div class="col-sm-12">
  130.                                                         <div class="form-group">
  131.                                                             <label class="form-label">Multiple Select: </label>
  132.                                                             <ul>
  133.                                                                 <li class="select-client">
  134.                                                                     <select class="form-control select2-style1" data-placeholder="Choose One" multiple>
  135.                                                                         <option label="Choose one"></option>
  136.                                                                         <option value="1">Angeline Julliet</option>
  137.                                                                         <option value="2">Helena Rose</option>
  138.                                                                         <option value="13">Daniel Obrien</option>
  139.                                                                         <option value="15">Jorah Randy</option>
  140.                                                                         <option value="3">Emma Watson</option>
  141.                                                                         <option value="5">Bonny Benett</option>
  142.                                                                         <option value="7">Jessie Spears</option>
  143.                                                                         <option value="9">Skyler Hilda</option>
  144.                                                                         <option value="11">Randy Orton</option>
  145.                                                                         <option value="14">Benjamin Button</option>
  146.                                                                     </select>
  147.                                                                 </li>
  148.                                                             </ul>
  149.                                                         </div>
  150.                                                     </div>
  151.                                                     <div class="col-sm-12">
  152.                                                         <div class="form-group">
  153.                                                             <label class="form-label">Select2 With Result: </label>
  154.                                                             <ul>
  155.                                                                 <li class="select-client">
  156.                                                                     <select class="form-control select2-style1" data-placeholder="Choose One">
  157.                                                                         <option label="Choose one"></option>
  158.                                                                         <option value="1">Angeline Julliet</option>
  159.                                                                         <option value="2">Helena Rose</option>
  160.                                                                         <option value="13">Daniel Obrien</option>
  161.                                                                         <option value="15">Jorah Randy</option>
  162.                                                                         <option value="3" selected>Emma Watson</option>
  163.                                                                         <option value="5">Bonny Benett</option>
  164.                                                                         <option value="7">Jessie Spears</option>
  165.                                                                         <option value="9">Skyler Hilda</option>
  166.                                                                         <option value="11">Randy Orton</option>
  167.                                                                         <option value="14">Benjamin Button</option>
  168.                                                                     </select>
  169.                                                                 </li>
  170.                                                             </ul>
  171.                                                         </div>
  172.                                                     </div>
  173.                                                 </div>
  174.                                             </div>
  175.                                         </div>
  176.                                     </div>
  177.                                 </div>
  178.                             </div>
  179.                             <!-- ROW CLOSED -->
  181.                             <!-- ROW -->
  182.                             <div class="row">
  183.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  184.                                     <div class="card">
  185.                                         <div class="card-header border-bottom">
  186.                                             <h3 class="card-title">Date, Month, Year Range Picker</h3>
  187.                                         </div>
  188.                                         <div class="card-body">
  189.                                             <div class="example">
  190.                                                 <div class="row row-sm">
  191.                                                     <div class="col-lg-4 mb-3">
  192.                                                         <label for="datepicker-date">Date Range Picker</label>
  193.                                                         <div class="input-group">
  194.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  195.                                                                 <i class="fe fe-calendar text-20"></i>
  196.                                                             </div>
  197.                                                             <input class="form-control" id="datepicker-date" placeholder="MM/DD/YYYY" type="text">
  198.                                                         </div><!-- input-group -->
  199.                                                     </div><!-- col-4 -->
  200.                                                     <div class="col-lg-4 mb-3">
  201.                                                         <label for="datepicker-month">Month Range Picker</label>
  202.                                                         <div class="input-group">
  203.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  204.                                                                 <i class="fe fe-calendar text-20"></i>
  205.                                                             </div>
  206.                                                             <input class="form-control" id="datepicker-month" placeholder="(000) 000-0000" type="text">
  207.                                                         </div><!-- input-group -->
  208.                                                     </div>
  209.                                                     <div class="col-lg-4 mb-3">
  210.                                                         <label for="datepicker-year">Year Range Picker</label>
  211.                                                         <div class="input-group">
  212.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  213.                                                                 <i class="fe fe-calendar text-20"></i>
  214.                                                             </div>
  215.                                                             <input class="form-control" id="datepicker-year" placeholder="(000) 000-0000 ext 0000" type="text">
  216.                                                         </div><!-- input-group -->
  217.                                                     </div>
  218.                                                 </div>
  219.                                             </div>
  220.                                         </div>
  221.                                     </div>
  222.                                 </div>
  223.                             </div>
  224.                             <!-- ROW CLOSED -->
  226.                             <!-- ROW -->
  227.                             <div class="row">
  228.                                 <div class="col-md-12">
  229.                                     <div class="card">
  230.                                         <div class="card-header border-bottom">
  231.                                             <h3 class="card-title">Jquery UI Date Pickers</h3>
  232.                                         </div>
  233.                                         <div class="card-body">
  234.                                             <div class="row row-sm">
  235.                                                 <div class="col-md-12 col-lg-12 col-xl-8 mb-3">
  236.                                                     <div class="example">
  237.                                                         <div class="row">
  238.                                                             <div class="col-lg-6 mb-3">
  239.                                                                 <label for="fc-datepicker">jQuery UI Date Picker</label>
  240.                                                                 <div class="input-group">
  241.                                                                     <div class="input-group-text bg-primary-transparent text-primary">
  242.                                                                         <i class="fe fe-calendar text-20"></i>
  243.                                                                     </div>
  244.                                                                     <input class="form-control fc-datepicker" id="fc-datepicker" placeholder="MM/DD/YYYY" type="text">
  245.                                                                 </div><!-- input-group -->
  246.                                                             </div><!-- col-6 -->
  247.                                                             <div class="col-lg-6 mb-3">
  248.                                                                 <label for="datepickerNoOfMonths">jQuery UI Date Picker</label>
  249.                                                                 <div class="input-group">
  250.                                                                     <div class="input-group-text bg-primary-transparent text-primary">
  251.                                                                         <i class="fe fe-calendar text-20"></i>
  252.                                                                     </div>
  253.                                                                     <input class="form-control" id="datepickerNoOfMonths" placeholder="MM/DD/YYYY" type="text">
  254.                                                                 </div><!-- input-group -->
  255.                                                             </div><!-- col-6 -->
  256.                                                         </div>
  257.                                                     </div>
  258.                                                 </div>
  259.                                                 <div class="col-md-12 col-lg-12 col-xl-4 mb-3">
  260.                                                     <div class="example">
  261.                                                         <label for="bootstrapDatePicker1">Date Picker Style-01</label>
  262.                                                         <div class="input-group">
  263.                                                             <div id="datePickerStyle1" class="input-group date" data-date-format="mm-dd-yyyy">
  264.                                                                 <span class="input-group-addon input-group-text bg-primary-transparent"><i class="fe fe-calendar text-primary-dark"></i></span>
  265.                                                                 <input class="form-control" id="bootstrapDatePicker1" type="text"/>
  266.                                                             </div>
  267.                                                         </div>
  268.                                                     </div>
  269.                                                 </div><!-- col-4 -->
  270.                                             </div>
  271.                                         </div>
  272.                                     </div>
  273.                                 </div>
  274.                             </div>
  275.                             <!-- ROW CLOSED -->
  277.                             <!-- ROW -->
  278.                             <div class="row">
  279.                                 <div class="col-md-12">
  280.                                     <div class="card">
  281.                                         <div class="card-header border-bottom">
  282.                                             <h3 class="card-title">Date & Time Pickers</h3>
  283.                                         </div>
  284.                                         <div class="card-body">
  285.                                             <div class="row">
  286.                                                 <div class="col-md-12 col-lg-12 col-xl-6 mb-3">
  287.                                                     <div class="example">
  288.                                                         <label for="datetimepicker1">Simple UI Date Time Picker</label>
  289.                                                         <div class="input-group col-md-6 ps-0">
  290.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  291.                                                                 <i class="fe fe-calendar text-20"></i>
  292.                                                             </div>
  293.                                                             <input class="form-control" id="datetimepicker1" type="text" value="2018-12-20 21:05">
  294.                                                         </div><!-- input-group -->
  295.                                                     </div>
  296.                                                 </div><!-- col-6 -->
  297.                                                 <div class="col-md-12 col-lg-12 col-xl-6 mb-3">
  298.                                                     <div class="example">
  299.                                                         <label for="datetimepicker2">Amaze UI Date Time Picker</label>
  300.                                                         <div class="input-group col-md-6 ps-0">
  301.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  302.                                                                 <i class="fe fe-calendar text-20"></i>
  303.                                                             </div>
  304.                                                             <input class="form-control" id="datetimepicker2" type="text" value="2018-12-20 21:05">
  305.                                                         </div><!-- input-group -->
  306.                                                     </div>
  307.                                                 </div><!-- col-6 -->
  308.                                             </div>
  309.                                         </div>
  310.                                     </div>
  311.                                 </div>
  312.                             </div>
  313.                             <!-- ROW CLOSED -->
  315.                             <!-- ROW -->
  316.                             <div class="row">
  317.                                 <div class="col-md-12">
  318.                                     <div class="card">
  319.                                         <div class="card-header border-bottom">
  320.                                             <h3 class="card-title">Bootstrap Maxlength</h3>
  321.                                         </div>
  322.                                         <div class="card-body">
  323.                                             <p class="card-sub-title text-muted">Bootstrap-Maxlength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute <code class="highlighter-rouge">maxlength</code> to work.</p>
  324.                                             <div class="example">
  325.                                                 <form class="form-horizontal">
  326.                                                     <div class="form-group">
  327.                                                         <label for="defaultconfig" class="form-label">Default Usuage</label>
  328.                                                         <input type="text" class="form-control" maxlength="25" id="defaultconfig">
  329.                                                     </div>
  330.                                                     <div class="form-group">
  331.                                                         <label for="thresholdConfig" class="form-label">Threshold Value</label>
  332.                                                         <input type="text" class="form-control" maxlength="25" id="thresholdConfig">
  333.                                                     </div>
  334.                                                     <div class="form-group">
  335.                                                         <label for="alloptions" class="form-label">All the options</label>
  336.                                                         <input type="text" class="form-control" maxlength="25" id="alloptions">
  337.                                                     </div>
  338.                                                     <div class="row">
  339.                                                         <div class="col-md-12 col-xl-3">
  340.                                                             <div class="form-group">
  341.                                                                 <label for="place-top-left" class="form-label">Top Left</label>
  342.                                                                 <input type="text" class="form-control" maxlength="25" id="place-top-left">
  343.                                                             </div>
  344.                                                         </div>
  345.                                                         <div class="col-md-12 col-xl-3">
  346.                                                             <div class="form-group">
  347.                                                                 <label for="place-top-right" class="form-label">Top Right</label>
  348.                                                                 <input type="text" class="form-control" maxlength="25" id="place-top-right">
  349.                                                             </div>
  350.                                                         </div>
  351.                                                         <div class="col-md-12 col-xl-3">
  352.                                                             <div class="form-group">
  353.                                                                 <label for="place-bottom-left" class="form-label">Bottom Left</label>
  354.                                                                 <input type="text" class="form-control" maxlength="25" id="place-bottom-left">
  355.                                                             </div>
  356.                                                         </div>
  357.                                                         <div class="col-md-12 col-xl-3">
  358.                                                             <div class="form-group">
  359.                                                                 <label for="place-bottom-right" class="form-label">Bottom Right</label>
  360.                                                                 <input type="text" class="form-control" maxlength="25" id="place-bottom-right">
  361.                                                             </div>
  362.                                                         </div>
  363.                                                     </div>
  364.                                                     <div class="form-group">
  365.                                                         <label for="textarea" class="form-label">Textarea</label>
  366.                                                         <textarea class="form-control" maxlength="225" id="textarea" rows="3"></textarea>
  367.                                                     </div>
  368.                                                 </form>
  369.                                             </div>
  370.                                         </div>
  371.                                     </div>
  372.                                 </div>
  373.                             </div>
  374.                             <!-- ROW CLOSED -->
  376.                             <!-- ROW -->
  377.                             <div class="row">
  378.                                 <div class="col-lg-12 col-md-12">
  379.                                     <div class="card">
  380.                                         <div class="card-header border-bottom">
  381.                                             <h3 class="card-title">File Upload</h3>
  382.                                         </div>
  383.                                         <div class="card-body">
  384.                                             <p class="text-muted card-sub-title">Dropify is a jQuery plugin to create a beautiful file uploader that converts a standard <code>input type="file"</code> into a nice drag & drop zone with previews and custom styles.</p>
  385.                                             <div class="row mb-4">
  386.                                                 <div class="col-sm-12 col-md-4 mb-4 mb-lg-0">
  387.                                                     <input type="file" class="dropify" data-height="200" />
  388.                                                 </div>
  389.                                                 <div class="col-sm-12 col-md-4  mb-4 mb-lg-0">
  390.                                                     <input type="file" class="dropify" data-default-file="{{absolute_url(asset('build/images/photos/1.jpg'))}}" data-height="200"  />
  391.                                                 </div>
  392.                                                 <div class="col-sm-12 col-md-4  mb-4 mb-lg-0">
  393.                                                     <input type="file" class="dropify" disabled="disabled"  />
  394.                                                 </div>
  395.                                             </div>
  396.                                             <div>
  397.                                                 <input id="demo" type="file" name="files" accept=" image/jpeg, image/png, text/html, application/zip, text/css, text/js" multiple />
  398.                                             </div>
  399.                                         </div>
  400.                                     </div>
  401.                                 </div>
  402.                             </div>
  403.                             <!-- ROW CLOSED -->
  405. {% endblock %}
  407. {% block javascripts %}
  408.    {{parent()}} 
  409.         <!-- BOOTSTRAP-DATE RANGE PICKER JS -->
  410.         <script src="{{absolute_url(asset('build/plugins/bootstrap-datepicker/bootstrap-datepicker.js'))}}"></script>
  411.         
  412.         <!-- JQUERY UI DATE PICKER JS -->
  413.         <script src="{{absolute_url(asset('build/plugins/date-picker/jquery-ui.js'))}}"></script>
  415.         <!-- bootstrap-datepicker js (Date picker Style-01) -->
  416.         <script src="{{absolute_url(asset('build/plugins/bootstrap-datepicker/js/datepicker.js'))}}"></script>
  417.         
  418.         <!-- SIMPLE DATE TIME PICKER JS -->
  419.         <script src="{{absolute_url(asset('build/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js'))}}"></script>
  420.         
  421.         <!-- AMAZE UI DATE PICKER JS -->
  422.         <script src="{{absolute_url(asset('build/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js'))}}"></script>
  424.         <!-- INTERNAL SELECT2 JS -->
  425.         <script src="{{absolute_url(asset('build/plugins/select2/select2.full.min.js'))}}"></script>
  427.         <!-- BOOTSTRAP MAX-LENGTH JS -->
  428.         <script src="{{absolute_url(asset('build/plugins/bootstrap-maxlength/dist/bootstrap-maxlength.min.js'))}}"></script>
  430.         <!--INTERNAL FILEUPLOADS JS -->
  431.         <script src="{{absolute_url(asset('build/plugins/fileuploads/js/fileupload.js'))}}"></script>
  432.         <script src="{{absolute_url(asset('build/plugins/fileuploads/js/file-upload.js'))}}"></script>
  434.         <!--INTERNAL FANCY UPLOADER JS -->
  435.         <script src="{{absolute_url(asset('build/plugins/fancyuploder/jquery.ui.widget.js'))}}"></script>
  436.         <script src="{{absolute_url(asset('build/plugins/fancyuploder/jquery.fileupload.js'))}}"></script>
  437.         <script src="{{absolute_url(asset('build/plugins/fancyuploder/jquery.iframe-transport.js'))}}"></script>
  438.         <script src="{{absolute_url(asset('build/plugins/fancyuploder/jquery.fancy-fileupload.js'))}}"></script>
  439.         <script src="{{absolute_url(asset('build/plugins/fancyuploder/fancy-uploader.js'))}}"></script>
  441.         <!-- FORM ELEMENTADVANCED JS -->
  442.         {{ encore_entry_script_tags('js/formelementadvnced') }}
  446. {% endblock %}