templates/form-elements.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Basic Elements'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Forms', title: 'Basic Elements'}) }}
  28.                         <div class="row">
  29.                             <div class="col-12">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Textual inputs</h4>
  33.                                         <p class="card-title-desc">Here are examples of <code>.form-control</code> applied to each
  34.                                             textual HTML5 <code>&lt;input&gt;</code> <code>type</code>.</p>
  35.                                     </div>
  36.                                     <div class="card-body p-4">
  37.         
  38.                                         <div class="row">
  39.                                             <div class="col-lg-6">
  40.                                                 <div>
  41.                                                     <div class="mb-3">
  42.                                                         <label for="example-text-input" class="form-label">Text</label>
  43.                                                         <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
  44.                                                     </div>
  45.                                                     <div class="mb-3">
  46.                                                         <label for="example-search-input" class="form-label">Search</label>
  47.                                                         <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
  48.                                                     </div>
  49.                                                     <div class="mb-3">
  50.                                                         <label for="example-email-input" class="form-label">Email</label>
  51.                                                         <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
  52.                                                     </div>
  53.                                                     <div class="mb-3">
  54.                                                         <label for="example-url-input" class="form-label">URL</label>
  55.                                                         <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
  56.                                                     </div>
  57.                                                     <div class="mb-3">
  58.                                                         <label for="example-tel-input" class="form-label">Telephone</label>
  59.                                                         <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
  60.                                                     </div>
  61.                                                     <div class="mb-3">
  62.                                                         <label for="example-password-input" class="form-label">Password</label>
  63.                                                         <input class="form-control" type="password" value="hunter2" id="example-password-input">
  64.                                                     </div>
  65.                                                     <div class="mb-3">
  66.                                                         <label for="example-number-input" class="form-label">Number</label>
  67.                                                         <input class="form-control" type="number" value="42" id="example-number-input">
  68.                                                     </div>
  69.                                                     <div>
  70.                                                         <label for="example-datetime-local-input" class="form-label">Date and time</label>
  71.                                                         <input class="form-control" type="datetime-local" value="2019-08-19T13:45:00" id="example-datetime-local-input">
  72.                                                     </div>
  73.                                                     
  74.                                                 </div>
  75.                                             </div>
  77.                                             <div class="col-lg-6">
  78.                                                 <div class="mt-3 mt-lg-0">
  79.                                                     <div class="mb-3">
  80.                                                         <label for="example-date-input" class="form-label">Date</label>
  81.                                                         <input class="form-control" type="date" value="2019-08-19" id="example-date-input">
  82.                                                     </div>
  83.                                                     <div class="mb-3">
  84.                                                         <label for="example-month-input" class="form-label">Month</label>
  85.                                                         <input class="form-control" type="month" value="2019-08" id="example-month-input">
  86.                                                     </div>
  87.                                                     <div class="mb-3">
  88.                                                         <label for="example-week-input" class="form-label">Week</label>
  89.                                                         <input class="form-control" type="week" value="2019-W33" id="example-week-input">
  90.                                                     </div>
  91.                                                     <div class="mb-3">
  92.                                                         <label for="example-time-input" class="form-label">Time</label>
  93.                                                         <input class="form-control" type="time" value="13:45:00" id="example-time-input">
  94.                                                     </div>
  95.                                                     <div class="mb-3">
  96.                                                         <label for="example-color-input" class="form-label">Color picker</label>
  97.                                                         <input type="color" class="form-control form-control-color mw-100" id="example-color-input" value="#5156be" title="Choose your color">
  98.                                                     </div>
  99.                                                     <div class="mb-3">
  100.                                                         <label class="form-label">Select</label>
  101.                                                         <select class="form-select">
  102.                                                             <option>Select</option>
  103.                                                             <option>Large select</option>
  104.                                                             <option>Small select</option>
  105.                                                         </select>
  106.                                                     </div>
  107.             
  108.                                                     <div>
  109.                                                         <label for="exampleDataList" class="form-label">Datalists</label>
  110.                                                         <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  111.                                                         <datalist id="datalistOptions">
  112.                                                             <option value="San Francisco">
  113.                                                             <option value="New York">
  114.                                                             <option value="Seattle">
  115.                                                             <option value="Los Angeles">
  116.                                                             <option value="Chicago">
  117.                                                         </datalist>
  118.                                                     </div>
  119.                                                 </div>
  120.                                             </div>
  121.                                         </div>
  122.                                     </div>
  123.                                 </div>
  124.                             </div> <!-- end col -->
  125.                         </div>
  126.                         <!-- end row -->
  128.                         <!-- Start row -->
  129.                         <div class="row">
  130.                             <div class="col-lg-6">
  131.                                 <div class="card">
  132.                                     <div class="card-header">
  133.                                         <h4 class="card-title">Sizing</h4>
  134.                                         <p class="card-title-desc">Set heights using classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>
  135.                                     </div>
  136.                                     <div class="card-body">
  137.                                         <form>
  138.                                             <div class="mb-4">
  139.                                                 <label class="form-label" for="default-input">Default input</label>
  140.                                                 <input class="form-control" type="text" id="default-input" placeholder="Default input">
  141.                                             </div>
  142.                                             <div class="mb-4">
  143.                                                 <label class="form-label" for="form-sm-input">Form Small input</label>
  144.                                                 <input class="form-control form-control-sm" type="text" id="form-sm-input" placeholder=".form-control-sm">
  145.                                             </div>
  146.                                             <div>
  147.                                                 <label class="form-label" for="form-lg-input">Form Large input</label>
  148.                                                 <input class="form-control form-control-lg" type="text" id="form-lg-input" placeholder=".form-control-lg">
  149.                                             </div>
  150.                                         </form>
  151.                                     </div>
  152.                                 </div>
  153.                             </div>
  154.                             <!-- end col -->
  155.                             <div class="col-lg-6">
  156.                                 <div class="card">
  157.                                     <div class="card-header">
  158.                                         <h4 class="card-title">Range Inputs</h4>
  159.                                         <p class="card-title-desc">Create custom <code>&lt;input type="range"&gt;</code>
  160.                                             controls with <code>.form-range</code>.</p>
  161.                                     </div>
  162.                                     <div class="card-body">
  163.                                         
  165.                                         <div class="mb-3">
  166.                                             <label for="customRange1" class="form-label">Example range</label>
  167.                                             <input type="range" class="form-range" id="customRange1">
  168.                                         </div>
  170.                                         <div class="mb-4">
  171.                                             <h5 class="font-size-14 mb-1">Min and max</h5>
  172.                                             <p class="card-title-desc mb-2">Range inputs have implicit values for min and
  173.                                                 max—0 and 100, respectively.</p>
  174.                                             <input type="range" class="form-range" min="0" max="5" id="customRange2">
  175.                                         </div>
  177.                                         <div>
  178.                                             <h5 class="font-size-14 mb-1">Steps</h5>
  179.                                             <p class="card-title-desc mb-2">By default, range inputs “snap” to integer
  180.                                                 values. To change this, you can specify a <code>step</code> value.</p>
  181.                                             <input type="range" class="form-range" min="0" max="5" id="customRange3">
  182.                                         </div>
  184.                                     </div>
  185.                                 </div>
  186.                             </div>
  187.                             <!-- end col -->
  188.                         </div>
  189.                         <!-- End row -->
  191.                         <div class="row">
  192.                             <div class="col-lg-12">
  193.                                 <div class="card">
  194.                                     <div class="card-header">
  195.                                         <h4 class="card-title">Form layouts</h4>
  196.                                         <p class="card-title-desc">Form layout options : from inline, horizontal & custom grid implementations</p>
  197.                                     </div>
  198.                                     <div class="card-body p-4">
  199.                                         
  200.                                         <div class="row">
  201.                                             <div class="col-lg-5">
  202.                                                 <div>
  203.                                                     <h5 class="font-size-14 mb-4"><i class="mdi mdi-arrow-right text-primary me-1"></i> Form groups</h5>
  204.                                                     <form>
  205.                                                         <div class="mb-3">
  206.                                                             <label class="form-label" for="formrow-firstname-input">First name</label>
  207.                                                             <input type="text" class="form-control" id="formrow-firstname-input" placeholder="Enter Name">
  208.                                                         </div>
  209.             
  210.                                                         <div class="row">                                                            
  211.                                                             <div class="col-md-6">
  212.                                                                 <div class="mb-3">
  213.                                                                     <label class="form-label" for="formrow-email-input">Email</label>
  214.                                                                     <input type="email" class="form-control" id="formrow-email-input" placeholder="Enter your Email">
  215.                                                                 </div>
  216.                                                             </div>
  217.                                                             <div class="col-md-6">
  218.                                                                 <div class="mb-3">
  219.                                                                     <label class="form-label" for="formrow-password-input">Password</label>
  220.                                                                     <input type="password" class="form-control" id="formrow-password-input" placeholder="Enter your password">
  221.                                                                 </div>
  222.                                                             </div>
  223.                                                         </div>
  224.             
  225.             
  226.                                                         <div class="form-group">
  227.                                                             
  228.                                                             <div class="form-check">
  229.                                                                 <input type="checkbox" class="form-check-input" id="formrow-customCheck">
  230.                                                                 <label class="form-check-label" for="formrow-customCheck">Check me out</label>
  231.                                                             </div>
  232.                                                         </div>
  233.                                                         <div class="mt-4">
  234.                                                             <button type="submit" class="btn btn-primary w-md">Submit</button>
  235.                                                         </div>
  236.                                                     </form>
  237.                                                 </div>
  238.                                             </div>
  239.                                             <div class="col-lg-6 ms-lg-auto">
  240.                                                 <div class="mt-4 mt-lg-0">
  241.                                                     <h5 class="font-size-14 mb-4"><i class="mdi mdi-arrow-right text-primary me-1"></i> Horizontal form</h5>
  242.                                                     
  243.                                                     <form>
  244.                                                         <div class="row mb-4">
  245.                                                             <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">First name</label>
  246.                                                             <div class="col-sm-9">
  247.                                                               <input type="text" class="form-control" id="horizontal-firstname-input" placeholder="Enter your First Name">
  248.                                                             </div>
  249.                                                         </div>
  250.                                                         <div class="row mb-4">
  251.                                                             <label for="horizontal-email-input" class="col-sm-3 col-form-label">Email</label>
  252.                                                             <div class="col-sm-9">
  253.                                                                 <input type="email" class="form-control" id="horizontal-email-input" placeholder="Enter your Email">
  254.                                                             </div>
  255.                                                         </div>
  256.                                                         <div class="row mb-4">
  257.                                                             <label for="horizontal-password-input" class="col-sm-3 col-form-label">Password</label>
  258.                                                             <div class="col-sm-9">
  259.                                                               <input type="password" class="form-control" id="horizontal-password-input" placeholder="Enter your password">
  260.                                                             </div>
  261.                                                         </div>
  262.             
  263.                                                         <div class="row justify-content-end">
  264.                                                             <div class="col-sm-9">
  265.                                                                 <div class="form-check mb-4">
  266.                                                                     <input type="checkbox" class="form-check-input" id="horizontal-customCheck">
  267.                                                                     <label class="form-check-label" for="horizontal-customCheck">Remember me</label>
  268.                                                                 </div>
  269.             
  270.                                                                 <div>
  271.                                                                     <button type="submit" class="btn btn-primary w-md">Submit</button>
  272.                                                                 </div>
  273.                                                             </div>
  274.                                                         </div>
  275.                                                     </form>
  276.                                                 </div>
  277.                                             </div>
  278.                                         </div>
  280.                                         <div class="row mt-4">
  281.                                             <div class="col-lg-6">
  282.                                                 <h5 class="font-size-14 mb-4"><i class="mdi mdi-arrow-right text-primary me-1"></i> Inline forms layout</h5>
  283.                                         
  284.                                                 <form class="row gx-3 gy-2 align-items-center mb-4 mb-lg-0">
  285.                                                     <div class="col-sm-4">
  286.                                                         <label class="visually-hidden" for="specificSizeInputName">Name</label>
  287.                                                         <input type="text" class="form-control" id="specificSizeInputName" placeholder="Enter Name">
  288.                                                     </div>
  289.                                                     <div class="col-sm-4">
  290.                                                         <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
  291.                                                         <div class="input-group">
  292.                                                             <div class="input-group-text">@</div>
  293.                                                             <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
  294.                                                         </div>
  295.                                                     </div>
  296.                                                     <div class="col-sm-auto">
  297.                                                         <div class="form-check">
  298.                                                             <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
  299.                                                             <label class="form-check-label" for="autoSizingCheck2">
  300.                                                                 Remember me
  301.                                                             </label>
  302.                                                         </div>
  303.                                                     </div>
  304.                                                     <div class="col-sm-auto">
  305.                                                         <button type="submit" class="btn btn-primary">Submit</button>
  306.                                                     </div>
  307.                                                 </form>
  308.                                             </div>
  310.                                             <div class="col-lg-6">
  311.                                                 <h5 class="font-size-14 mb-4"><i class="mdi mdi-arrow-right text-primary me-1"></i> Floating Label</h5>
  313.                                                 <div class="row">
  314.                                                     <div class="col-lg-6">
  315.                                                         <div class="form-floating mb-3 mb-lg-0">
  316.                                                             <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  317.                                                             <label for="floatingInput">Email address</label>
  318.                                                         </div>                                                        
  319.                                                     </div>
  320.                                                     <div class="col-lg-6">
  321.                                                         <div class="form-floating">
  322.                                                             <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  323.                                                             <label for="floatingPassword">Password</label>
  324.                                                         </div>
  325.                                                     </div>
  326.                                                 </div>
  327.                                             </div>
  328.                                         </div>
  330.                                         <div class="row mt-4">
  331.                                             <div class="col-lg-6">
  332.                                                 <h5 class="font-size-14 mb-4"><i class="mdi mdi-arrow-right text-primary me-1"></i> Inline forms layout used by hstack</h5>
  333.                                                 <form class="row gx-3 gy-2 align-items-center">
  334.                                                     <div class="hstack gap-3">
  335.                                                         <input class="form-control me-auto" type="text" placeholder="Add your item here...">
  336.                                                         <button type="button" class="btn btn-secondary">Submit</button>
  337.                                                         <div class="vr"></div>
  338.                                                         <button type="reset" class="btn btn-outline-danger">Reset</button>
  339.                                                     </div>
  340.                                                 </form>
  341.                                             </div>
  342.                                         </div>
  343.                                     </div>
  344.                                 </div>
  345.                             </div>
  346.                         </div>
  347.                         <!-- End Form Layout -->
  349.                         <div class="row">
  350.                             <div class="col-xl-6">
  351.                                 <div class="card">
  352.                                     <div class="card-header">
  353.                                         <h4 class="card-title mb-0">Checkboxes</h4>
  354.                                     </div>
  355.                                     <div class="card-body">
  356.                                         <div class="row">
  357.                                             <div class="col-md-6">
  359.                                                 <div >
  360.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i> Form Checkboxes
  361.                                                     </h5>
  362.                                                     <div class="form-check mb-3">
  363.                                                         <input class="form-check-input" type="checkbox" id="formCheck1">
  364.                                                         <label class="form-check-label" for="formCheck1">
  365.                                                             Form Checkbox
  366.                                                         </label>
  367.                                                     </div>
  368.                                                     <div class="form-check">
  369.                                                         <input class="form-check-input" type="checkbox" id="formCheck2" checked>
  370.                                                         <label class="form-check-label" for="formCheck2">
  371.                                                             Form Checkbox checked
  372.                                                         </label>
  373.                                                     </div>
  374.                                                 </div>
  375.                                             </div>
  376.                                             
  377.                                             <div class="col-md-6">
  379.                                                 <div class="mt-4 mt-md-0">
  380.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i> Form Checkboxes
  381.                                                         Right</h5>
  382.                                                     <div>
  383.                                                         <div class="form-check form-check-right mb-3">
  384.                                                             <input class="form-check-input" type="checkbox" id="formCheckRight1">
  385.                                                             <label class="form-check-label" for="formCheckRight1">
  386.                                                                 Form Checkbox Right
  387.                                                             </label>
  388.                                                         </div>
  389.                                                     </div>
  390.                                                     <div>
  391.                                                         <div class="form-check form-check-right">
  392.                                                             <input class="form-check-input" type="checkbox" id="formCheckRight2"
  393.                                                                 checked>
  394.                                                             <label class="form-check-label" for="formCheckRight2">
  395.                                                                 Form Checkbox Right checked
  396.                                                             </label>
  397.                                                         </div>
  398.                                                     </div>
  399.                                                     
  400.                                                 </div>
  401.                                             </div>
  402.                                         </div>
  403.                                     </div>
  404.                                 </div>
  405.                             </div> 
  406.                             <div class="col-xl-6">
  407.                                 <div class="card">
  408.                                     <div class="card-header">
  409.                                         <h4 class="card-title mb-0">Radios</h4>
  410.                                     </div>
  411.                                     <div class="card-body">
  412.                                         <div class="row">
  413.                                             <div class="col-md-6">
  414.                                                 <div>
  415.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i>Form Radios</h5>
  416.                                                     <div class="form-check mb-3">
  417.                                                         <input class="form-check-input" type="radio" name="formRadios"
  418.                                                             id="formRadios1" checked>
  419.                                                         <label class="form-check-label" for="formRadios1">
  420.                                                             Form Radio
  421.                                                         </label>
  422.                                                     </div>
  423.                                                     <div class="form-check">
  424.                                                         <input class="form-check-input" type="radio" name="formRadios"
  425.                                                             id="formRadios2">
  426.                                                         <label class="form-check-label" for="formRadios2">
  427.                                                             Form Radio checked
  428.                                                         </label>
  429.                                                     </div>
  430.                                                 </div>
  431.                                             </div>
  432.                                             <div class="col-md-6">
  433.                                                 <div class="mt-4 mt-md-0">
  434.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i>Form Radios Right</h5>
  435.                                                     <div>
  436.                                                         <div class="form-check form-check-right mb-3">
  437.                                                             <input class="form-check-input" type="radio" name="formRadiosRight"
  438.                                                                 id="formRadiosRight1" checked>
  439.                                                             <label class="form-check-label" for="formRadiosRight1">
  440.                                                                 Form Radio Right
  441.                                                             </label>
  442.                                                         </div>
  443.                                                     </div>
  445.                                                     <div>
  446.                                                         <div class="form-check form-check-right">
  447.                                                             <input class="form-check-input" type="radio" name="formRadiosRight"
  448.                                                                 id="formRadiosRight2">
  449.                                                             <label class="form-check-label" for="formRadiosRight2">
  450.                                                                 Form Radio Right checked
  451.                                                             </label>
  452.                                                         </div>
  453.                                                     </div>
  454.                                                 </div>
  455.                                             </div>
  456.                                         </div>
  457.                                     </div>
  458.                                 </div>
  459.                             </div> 
  460.                         </div>
  461.                         <!-- end row -->
  463.                         <div class="row">
  464.                             <div class="col-lg-12">
  465.                                 <div class="card">
  466.                                     <div class="card-header">
  467.                                         <h4 class="card-title">Switches</h4>
  468.                                         <p class="card-title-desc">A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>
  469.                                     </div>
  470.                                     <div class="card-body">
  471.                                         
  473.                                         <div class="row">
  475.                                             <div class="col-md-6">
  476.                                                 <div>
  477.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i>Switch examples</h5>
  480.                                                     <div class="form-check form-switch mb-3" dir="ltr">
  481.                                                         <input type="checkbox" class="form-check-input" id="customSwitch1" checked>
  482.                                                         <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
  483.                                                     </div>
  484.                                                     <div class="form-check form-switch" dir="ltr">
  485.                                                         <input type="checkbox" class="form-check-input" disabled id="customSwitch2">
  486.                                                         <label class="form-check-label" for="customSwitch2">Disabled switch element</label>
  487.                                                     </div>
  488.                                                 </div>
  489.                                             </div>
  490.                                             <div class="col-md-6">
  491.                                                 <div class="mt-4 mt-md-0">
  492.                                                     <h5 class="font-size-14 mb-3"><i class="mdi mdi-arrow-right text-primary me-1"></i>Switch sizes</h5>
  493.         
  494.                                                     <div class="form-check form-switch mb-3" dir="ltr">
  495.                                                         <input type="checkbox" class="form-check-input" id="customSwitchsizesm" checked>
  496.                                                         <label class="form-check-label" for="customSwitchsizesm">Small Size Switch</label>
  497.                                                     </div>
  498.         
  499.                                                     <div class="form-check form-switch form-switch-md mb-3" dir="ltr">
  500.                                                         <input type="checkbox" class="form-check-input" id="customSwitchsizemd">
  501.                                                         <label class="form-check-label" for="customSwitchsizemd">Medium Size Switch</label>
  502.                                                     </div>
  503.         
  504.                                                     <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
  505.                                                         <input type="checkbox" class="form-check-input" id="customSwitchsizelg" checked>
  506.                                                         <label class="form-check-label" for="customSwitchsizelg">Large Size Switch</label>
  507.                                                     </div>
  508.                                                 </div>
  509.                                             </div>
  510.                                         </div>
  511.                                     </div>
  512.                                 </div>
  513.                             </div>
  514.                         </div>
  515.                         <!-- end row -->
  517.                     </div> <!-- container-fluid -->
  518.                 </div>
  519.                 <!-- End Page-content -->
  521.                 
  522.                 {{ include('partials/footer.html.twig') }}
  523.             </div>
  524.             <!-- end main content-->
  526.         </div>
  527.         <!-- END layout-wrapper -->
  529.         {{ include('partials/right-sidebar.html.twig') }}
  531.         {{ include('partials/vendor-scripts.html.twig') }}
  533.         <script src="/js/app.js"></script>
  535.     </body>
  536. </html>