Form Advanced
- Robotech
- /
- Forms
- /
- Advanced
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<select id="default" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
<option>United States</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<select id="multiSelect" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
<option>United States</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<select id="taggableSelect" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
<option>United States</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/huebee/huebee.min.css">
<!-- JS -->
<script src="assets/libs/huebee/huebee.pkgd.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700 color-input" value="#228">
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700 " value="#024" data-huebee />
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700 " value="#f7f8f9" data-huebee='{ "setBGColor": true, "saturations": 2 }' />
<div class="flex">
<button type="button" class="inline-flex items-center px-3 py-1 text-sm text-slate-100 bg-primary-500 rounded-l-md border border-r-0 border-primary-500 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input type="number" id="website-admin" class="form-input w-full rounded-none border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" min="0" name="quantity" value="0">
<button type="button" class="inline-flex items-center px-3 py-1 text-sm text-slate-100 bg-primary-500 rounded-r-md border border-l-0 border-primary-500 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
Vanilla JS Datepicker
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/vanillajs-datepicker/css/datepicker.min.css">
<!-- JS -->
<script src="assets/libs/vanillajs-datepicker/js/datepicker-full.min.js"></script>
<script src="assets/libs/moment/moment.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<label for="Default_Datepicker" class="font-medium text-sm text-slate-600 dark:text-slate-400">Default Datepicker</label>
<input type="text" id="Default_Datepicker" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" name="foo">
<label for="Default_Datepicker" class="font-medium text-sm text-slate-600 dark:text-slate-400 mt-2">Default Datepicker</label>
<div class="flex mt-2" id="DateRange">
<input type="text" id="start-date" class="form-input w-full rounded-none rounded-l-md border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" placeholder="Start" aria-label="StartDate">
<span class="inline-flex items-center px-3 text-sm text-slate-900 bg-slate-200 border border-r-0 border-l-0 border-slate-300 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
to
</span>
<input type="text" id="end-date" class="form-input w-full rounded-none rounded-r-md border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" placeholder="End" aria-label="EndDate">
</div>
Vanilla JS Datepicker
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/vanillajs-datepicker/css/datepicker.min.css">
<!-- JS -->
<script src="assets/libs/vanillajs-datepicker/js/datepicker-full.min.js"></script>
<script src="assets/libs/moment/moment.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<label class="mb-3 font-medium text-sm text-slate-600 dark:text-slate-400">Inline Datepicker</label>
<div id="inline_calendar"></div>
<!-- JS -->
<script src="assets/libs/imask/imask.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>
<div class="mb-2">
<label class="font-medium text-sm text-slate-600 dark:text-slate-400">RegExp (Russian postal code) <span class="desc ml-2 text-xs text-slate-400">/^[1-6]\d{0,5}$/</span></label>
<input id="regexp-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
</div>
<div class="mb-2">
<label class="font-medium text-sm text-slate-600 dark:text-slate-400">Type here against mask <span class="desc ml-2 text-xs text-slate-400">+{7}(000)000-00-00</span></label>
<input id="start-phone-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
<div class="desc text-xs text-slate-400">unmasked: <span id="start-phone-unmasked"></span><span id="start-phone-complete" class="example__complete"></span></div>
</div>
<div class="mb-2">
<label class="font-medium text-sm text-slate-600 dark:text-slate-400">Mask in overwrite and autofix modes</label>
<input id="date-overwrite-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
</div>
<div class="mb-2">
<label class="font-medium text-sm text-slate-600 dark:text-slate-400">Type to uppercase</label>
<input id="uppercase-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
</div>
<div>
<label class="font-medium text-sm text-slate-600 dark:text-slate-400">Date and time</label>
<input id="moment-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700">
<div class="desc text-xs text-slate-400">date: <span id="moment-value"></span></div>
</div>
@@include("partials/footer/footer.html")