mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
1515 lines
93 KiB
HTML
1515 lines
93 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version v1.0.0-alpha
|
|
* @link https://github.com/tabler/tabler
|
|
* Copyright 2018-2019 The Tabler Authors
|
|
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://tabler.io/license)
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
|
<meta http-equiv="Content-Language" content="en"/>
|
|
<meta name="msapplication-TileColor" content="#206bc4"/>
|
|
<meta name="theme-color" content="#206bc4"/>
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|
<meta name="mobile-web-app-capable" content="yes"/>
|
|
<meta name="HandheldFriendly" content="True"/>
|
|
<meta name="MobileOptimized" content="320"/>
|
|
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
|
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
|
|
<title>Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
|
<!-- Libs CSS -->
|
|
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
|
|
<!-- Tabler Core -->
|
|
<link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
|
|
<!-- Tabler Plugins -->
|
|
<link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
|
|
</head>
|
|
<body class="antialiased">
|
|
<div class="wrapper">
|
|
<div class="content">
|
|
<header class="topnav">
|
|
<div class="container">
|
|
<div class="navbar navbar-expand-lg navbar-light">
|
|
<a href="." class="navbar-brand mr-4">
|
|
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
|
|
<img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
|
|
</a>
|
|
<ul class="nav navbar-menu align-items-center ml-auto">
|
|
<li class="nav-item d-none d-lg-flex mr-3">
|
|
<a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
|
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
|
</svg>
|
|
Source code
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" data-toggle="dropdown"
|
|
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
|
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
|
|
<span class="ml-2 d-none d-lg-block lh-1">
|
|
Leesa Beaty
|
|
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
|
Profile
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
|
Settings
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
|
Inbox
|
|
<span class="badge bg-primary ml-auto">6</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
|
Message
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
|
|
Need help?
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
|
Sign out
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<header class="topnav">
|
|
<div class="navbar navbar-expand-lg navbar-light">
|
|
<div class="container">
|
|
<ul class="navbar-nav flex-wrap">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./index.html" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
|
</span>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="./form-elements.html" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
|
|
</span>
|
|
Form elements
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
|
|
</span>
|
|
Base
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li >
|
|
<a class="dropdown-item" href="./blank.html" >
|
|
Starter page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./buttons.html" >
|
|
Buttons
|
|
<span class="badge bg-green ml-auto">New</span>
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./cards.html" >
|
|
Cards
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./datatables.html" >
|
|
Data Tables
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./calendar.html" >
|
|
Calendar
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./carousel.html" >
|
|
Carousel
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./users.html" >
|
|
Users
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./gallery.html" >
|
|
Gallery
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./profile.html" >
|
|
Profile
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./music.html" >
|
|
Music
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./charts.html" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
|
|
</span>
|
|
Charts
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
|
|
</span>
|
|
Error pages
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li >
|
|
<a class="dropdown-item" href="./400.html" >
|
|
400 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./401.html" >
|
|
401 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./403.html" >
|
|
403 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./404.html" >
|
|
404 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./500.html" >
|
|
500 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./503.html" >
|
|
503 page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./maintenance.html" >
|
|
Maintenance page
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
|
</span>
|
|
A
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropright">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
|
|
B
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./tmp.html" class="dropdown-item">C</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./layouts.html" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
|
|
</span>
|
|
Layouts
|
|
<span class="badge bg-green ml-2">New</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
</span>
|
|
Extra
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li >
|
|
<a class="dropdown-item" href="./invoice.html" >
|
|
Invoice
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./blog.html" >
|
|
Blog cards
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./search-results.html" >
|
|
Search results
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
|
</span>
|
|
Documentation
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/index.html" >
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/alerts.html" >
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/autosize.html" >
|
|
Autosize
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/avatars.html" >
|
|
Avatars
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/badges.html" >
|
|
Badges
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/breadcrumb.html" >
|
|
Breadcrumb
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/buttons.html" >
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/cards.html" >
|
|
Cards
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/carousel.html" >
|
|
Carousel
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/colors.html" >
|
|
Colors
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/countup.html" >
|
|
Countup
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/cursors.html" >
|
|
Cursors
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/charts.html" >
|
|
Charts
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/divider.html" >
|
|
Divider
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/empty.html" >
|
|
Empty states
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/flags.html" >
|
|
Flags
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/form-elements.html" >
|
|
Form elements
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/form-helpers.html" >
|
|
Form helpers
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/input-mask.html" >
|
|
Form input mask
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/layout.html" >
|
|
Layout
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/progress.html" >
|
|
Progress
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/payments.html" >
|
|
Payments
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/ribbons.html" >
|
|
Ribbons
|
|
<span class="badge bg-green ml-auto">New</span>
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/spinners.html" >
|
|
Spinners
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/steps.html" >
|
|
Steps
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/tables.html" >
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/tabs.html" >
|
|
Tabs
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/timelines.html" >
|
|
Timelines
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/toasts.html" >
|
|
Toasts
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/tooltips.html" >
|
|
Tooltips
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/typography.html" >
|
|
Typography
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-search d-none d-xl-block">
|
|
<form action="." method="get">
|
|
<div class="input-icon">
|
|
<span class="input-icon-addon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Search…">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="content-page">
|
|
<main class="container my-4 flex-fill">
|
|
<!-- Page title -->
|
|
<div class="page-title-box">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<h2 class="page-title">
|
|
Form elements
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form action="https://httpbin.org/post" method="post" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Form elements</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Static</label>
|
|
<div class="form-control-plaintext">Username</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Text</label>
|
|
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Disabled</label>
|
|
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Readonly</label>
|
|
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
|
value="Well, how'd you become king, then?" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
|
|
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Select</div>
|
|
<select class="form-select">
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Select multiple</div>
|
|
<select class="form-select" multiple>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input group</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
<span class="input-group-append">
|
|
<button class="btn btn-primary" type="button">Go!</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input group buttons</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-primary">Action</button>
|
|
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a class="dropdown-item" href="#">
|
|
Action
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
Another action
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Icon input</label>
|
|
<div class="input-icon mb-3">
|
|
<input type="text" class="form-control" placeholder="Search…">
|
|
<span class="input-icon-addon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</span>
|
|
</div>
|
|
<div class="input-icon mb-3">
|
|
<span class="input-icon-addon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Separated inputs</label>
|
|
<div class="row row-xs">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="btn btn-secondary btn-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">ZIP Code</label>
|
|
<div class="row row-sm">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
</div>
|
|
<div class="col-auto align-self-center">
|
|
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
|
|
<p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>
|
|
" data-html="true">?</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">@</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="username" value="">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Subdomain</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="subdomain" value="">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">.tabler.io</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Your vanity URL</label>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">https://example.com/users/</span>
|
|
</div>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Price</label>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">$</span>
|
|
</div>
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Button input</label>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Action
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">
|
|
Action
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
Another action
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tags</label>
|
|
<select name="tags" id="select-tags" class="form-select">
|
|
<option value="dev">dev</option>
|
|
<option value="live">live</option>
|
|
<option value="test">test</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Top person</label>
|
|
<select name="users" id="select-users" class="form-select">
|
|
<option value="1">Chuck Tesla</option>
|
|
<option value="2">Elon Musk</option>
|
|
<option value="3" selected>Paweł Kuna</option>
|
|
<option value="4">Nikola Tesla</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Users list</label>
|
|
<select name="people" id="select-people" class="form-select">
|
|
<option value="1" data-data='{"image": "./static/avatars/000m.jpg"}'>Paweł Kuna</option>
|
|
<option value="2" data-data='{"image": "./"}'>Jeffie Lewzey</option>
|
|
<option value="3" data-data='{"image": "./static/avatars/002m.jpg"}'>Mallory Hulme</option>
|
|
<option value="4" data-data='{"image": "./static/avatars/003m.jpg"}' selected>Dunn Slane</option>
|
|
<option value="5" data-data='{"image": "./static/avatars/000f.jpg"}'>Emmy Levet</option>
|
|
<option value="6" data-data='{"image": "./static/avatars/001f.jpg"}'>Maryjo Lebarree</option>
|
|
<option value="7" data-data='{"image": "./"}'>Egan Poetz</option>
|
|
<option value="8" data-data='{"image": "./static/avatars/002f.jpg"}'>Kellie Skingley</option>
|
|
<option value="9" data-data='{"image": "./static/avatars/003f.jpg"}'>Christabel Charlwood</option>
|
|
<option value="10" data-data='{"image": "./"}'>Haskel Shelper</option>
|
|
<option value="11" data-data='{"image": "./static/avatars/006m.jpg"}'>Lorry Mion</option>
|
|
<option value="12" data-data='{"image": "./static/avatars/004f.jpg"}'>Leesa Beaty</option>
|
|
<option value="13" data-data='{"image": "./static/avatars/007m.jpg"}'>Perren Keemar</option>
|
|
<option value="14" data-data='{"image": "./"}'>Sunny Airey</option>
|
|
<option value="15" data-data='{"image": "./static/avatars/009m.jpg"}'>Geoffry Flaunders</option>
|
|
<option value="16" data-data='{"image": "./static/avatars/010m.jpg"}'>Thatcher Keel</option>
|
|
<option value="17" data-data='{"image": "./static/avatars/005f.jpg"}'>Dyann Escala</option>
|
|
<option value="18" data-data='{"image": "./static/avatars/006f.jpg"}'>Avivah Mugleston</option>
|
|
<option value="19" data-data='{"image": "./"}'>Arlie Armstead</option>
|
|
<option value="20" data-data='{"image": "./static/avatars/008f.jpg"}'>Tessie Curzon</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Countries</label>
|
|
<select name="countries" id="select-countries" class="form-select">
|
|
<option value="pl" data-data='{"flag": "pl"}' selected>Poland</option>
|
|
<option value="de" data-data='{"flag": "de"}'>Germany</option>
|
|
<option value="cz" data-data='{"flag": "cz"}'>Czech Republic</option>
|
|
<option value="br" data-data='{"flag": "br"}'>Brazil</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Image Check</label>
|
|
<div class="row row-xs">
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/77586f6ffa9fbc5e.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked/>
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/552683cc4e5f0e11.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/3664593f945f0d8d.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked/>
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/529078594c496ec5.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/a74c41b6fb7fdf34.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/a159fb2bff29fda4.jpg" alt="" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color Input</label>
|
|
<div class="row row-xs">
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="blue" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-blue"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="azure" class="form-colorinput-input" checked/>
|
|
<span class="form-colorinput-color bg-azure"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="indigo" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-indigo"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="purple" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-purple"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="pink" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-pink"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="red" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-red"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="orange" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-orange"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="yellow" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-yellow"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="lime" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-lime"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="green" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-green"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color picker</label>
|
|
<input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Validation States</label>
|
|
<input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
|
|
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
|
|
<div class="invalid-feedback">Invalid feedback</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-12">
|
|
<fieldset class="form-fieldset">
|
|
<div class="mb-3">
|
|
<label class="form-label">Full name<span class="form-required">*</span></label>
|
|
<input type="text" class="form-control" autocomplete="off"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Company<span class="form-required">*</span></label>
|
|
<input type="text" class="form-control" autocomplete="off"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Email<span class="form-required">*</span></label>
|
|
<input type="email" class="form-control" autocomplete="off"/>
|
|
</div>
|
|
<div class="">
|
|
<label class="form-label">Phone number</label>
|
|
<input type="tel" class="form-control" autocomplete="off"/>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3">
|
|
<label class="form-label">Your skills</label>
|
|
<div class="form-selectgroup form-selectgroup-pills">
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
|
|
<span class="form-selectgroup-box">HTML</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">CSS</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">PHP</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">JavaScript</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Icons input</label>
|
|
<div class="form-selectgroup w-100">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="device" value="smartphone" class="form-selectgroup-input" checked>
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="device" value="tablet" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="4" y="2" width="16" height="20" rx="2" ry="2" transform="rotate(180 12 12)"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="device" value="monitor" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="device" value="x" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Shipping methods</label>
|
|
<div class="form-selectgroup form-selectgroup-vertical">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="shipping-method" value="Unregistered" class="form-selectgroup-input" checked>
|
|
<span class="form-selectgroup-box">Unregistered</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="shipping-method" value="Priority Mail" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">Priority Mail</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="shipping-method" value="Express Mail" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">Express Mail</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Icon input</label>
|
|
<div class="form-selectgroup">
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
|
|
</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-box">Other</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Payment method</label>
|
|
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-visa payment-sm mr-2"></span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-mastercard payment-sm mr-2"></span>
|
|
ending in <strong>2807</strong>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-paypal payment-sm mr-2"></span>
|
|
ending in <strong>7959</strong>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Project Manager</label>
|
|
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div class="form-selectgroup-box-content d-flex align-items-center">
|
|
<span class="avatar mr-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
|
|
<div class="lh-sm">
|
|
<div class="strong">Paweł Kuna</div>
|
|
<div class="text-muted">UI Designer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked>
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div class="form-selectgroup-box-content d-flex align-items-center">
|
|
<span class="avatar mr-3">JL</span>
|
|
<div class="lh-sm">
|
|
<div class="strong">Jeffie Lewzey</div>
|
|
<div class="text-muted">Chemical Engineer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div class="form-selectgroup-box-content d-flex align-items-center">
|
|
<span class="avatar mr-3" style="background-image: url(./static/avatars/002m.jpg)"></span>
|
|
<div class="lh-sm">
|
|
<div class="strong">Mallory Hulme</div>
|
|
<div class="text-muted">Geologist IV</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div class="form-selectgroup-box-content d-flex align-items-center">
|
|
<span class="avatar mr-3" style="background-image: url(./static/avatars/003m.jpg)"></span>
|
|
<div class="lh-sm">
|
|
<div class="strong">Dunn Slane</div>
|
|
<div class="text-muted">Research Nurse</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
|
|
<div class="form-selectgroup-box d-flex align-items-center p-3">
|
|
<div class="mr-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div class="form-selectgroup-box-content d-flex align-items-center">
|
|
<span class="avatar mr-3" style="background-image: url(./static/avatars/000f.jpg)"></span>
|
|
<div class="lh-sm">
|
|
<div class="strong">Emmy Levet</div>
|
|
<div class="text-muted">VP Product Management</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<div class="form-label">Radios</div>
|
|
<div>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="radio" checked>
|
|
<span class="form-check-label">Option 1</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="radio">
|
|
<span class="form-check-label">Option 2</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="radio" disabled>
|
|
<span class="form-check-label">Option 3</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="radio" checked disabled>
|
|
<span class="form-check-label">Option 4</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Inline Radios</div>
|
|
<div>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" checked>
|
|
<span class="form-check-label">Option 1</span>
|
|
</label>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio">
|
|
<span class="form-check-label">Option 2</span>
|
|
</label>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" disabled>
|
|
<span class="form-check-label">Option 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Checkboxes</div>
|
|
<div>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">Checkbox input</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" disabled>
|
|
<span class="form-check-label">Disabled checkbox input</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Checked checkbox input</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Inline Checkboxes</div>
|
|
<div>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">Option 1</span>
|
|
</label>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" disabled>
|
|
<span class="form-check-label">Option 2</span>
|
|
</label>
|
|
<label class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Option 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Toggle switches</div>
|
|
<label class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Option 1</span>
|
|
</label>
|
|
<label class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">Option 2</span>
|
|
</label>
|
|
<label class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">Option 3</span>
|
|
</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Single switch</div>
|
|
<label class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">I agree with terms and conditions</span>
|
|
</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-label">Custom File Input</div>
|
|
<div class="form-file">
|
|
<input type="file" class="form-file-input" id="customFile">
|
|
<label class="form-file-label" for="customFile">
|
|
<span class="form-file-text">Choose file...</span>
|
|
<span class="form-file-button">Browse</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Date of birth</label>
|
|
<div class="row row-xs">
|
|
<div class="col-5">
|
|
<select name="user[month]" class="form-select">
|
|
<option value="">Month</option>
|
|
<option value="1">January</option>
|
|
<option value="2">February</option>
|
|
<option value="3">March</option>
|
|
<option value="4">April</option>
|
|
<option value="5">May</option>
|
|
<option selected="selected" value="6">June</option>
|
|
<option value="7">July</option>
|
|
<option value="8">August</option>
|
|
<option value="9">September</option>
|
|
<option value="10">October</option>
|
|
<option value="11">November</option>
|
|
<option value="12">December</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-3">
|
|
<select name="user[day]" class="form-select">
|
|
<option value="">Day</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
<option value="13">13</option>
|
|
<option value="14">14</option>
|
|
<option value="15">15</option>
|
|
<option value="16">16</option>
|
|
<option value="17">17</option>
|
|
<option value="18">18</option>
|
|
<option value="19">19</option>
|
|
<option value="20" selected>20</option>
|
|
<option value="21">21</option>
|
|
<option value="22">22</option>
|
|
<option value="23">23</option>
|
|
<option value="24">24</option>
|
|
<option value="25">25</option>
|
|
<option value="26">26</option>
|
|
<option value="27">27</option>
|
|
<option value="28">28</option>
|
|
<option value="29">29</option>
|
|
<option value="30">30</option>
|
|
<option value="31">31</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-4">
|
|
<select name="user[year]" class="form-select">
|
|
<option value="">Year</option>
|
|
<option value="2014">2014</option>
|
|
<option value="2013">2013</option>
|
|
<option value="2012">2012</option>
|
|
<option value="2011">2011</option>
|
|
<option value="2010">2010</option>
|
|
<option value="2009">2009</option>
|
|
<option value="2008">2008</option>
|
|
<option value="2007">2007</option>
|
|
<option value="2006">2006</option>
|
|
<option value="2005">2005</option>
|
|
<option value="2004">2004</option>
|
|
<option value="2003">2003</option>
|
|
<option value="2002">2002</option>
|
|
<option value="2001">2001</option>
|
|
<option value="2000">2000</option>
|
|
<option value="1999">1999</option>
|
|
<option value="1998">1998</option>
|
|
<option value="1997">1997</option>
|
|
<option value="1996">1996</option>
|
|
<option value="1995">1995</option>
|
|
<option value="1994">1994</option>
|
|
<option value="1993">1993</option>
|
|
<option value="1992">1992</option>
|
|
<option value="1991">1991</option>
|
|
<option value="1990">1990</option>
|
|
<option value="1989" selected>1989</option>
|
|
<option value="1988">1988</option>
|
|
<option value="1987">1987</option>
|
|
<option value="1986">1986</option>
|
|
<option value="1985">1985</option>
|
|
<option value="1984">1984</option>
|
|
<option value="1983">1983</option>
|
|
<option value="1982">1982</option>
|
|
<option value="1981">1981</option>
|
|
<option value="1980">1980</option>
|
|
<option value="1979">1979</option>
|
|
<option value="1978">1978</option>
|
|
<option value="1977">1977</option>
|
|
<option value="1976">1976</option>
|
|
<option value="1975">1975</option>
|
|
<option value="1974">1974</option>
|
|
<option value="1973">1973</option>
|
|
<option value="1972">1972</option>
|
|
<option value="1971">1971</option>
|
|
<option value="1970">1970</option>
|
|
<option value="1969">1969</option>
|
|
<option value="1968">1968</option>
|
|
<option value="1967">1967</option>
|
|
<option value="1966">1966</option>
|
|
<option value="1965">1965</option>
|
|
<option value="1964">1964</option>
|
|
<option value="1963">1963</option>
|
|
<option value="1962">1962</option>
|
|
<option value="1961">1961</option>
|
|
<option value="1960">1960</option>
|
|
<option value="1959">1959</option>
|
|
<option value="1958">1958</option>
|
|
<option value="1957">1957</option>
|
|
<option value="1956">1956</option>
|
|
<option value="1955">1955</option>
|
|
<option value="1954">1954</option>
|
|
<option value="1953">1953</option>
|
|
<option value="1952">1952</option>
|
|
<option value="1951">1951</option>
|
|
<option value="1950">1950</option>
|
|
<option value="1949">1949</option>
|
|
<option value="1948">1948</option>
|
|
<option value="1947">1947</option>
|
|
<option value="1946">1946</option>
|
|
<option value="1945">1945</option>
|
|
<option value="1944">1944</option>
|
|
<option value="1943">1943</option>
|
|
<option value="1942">1942</option>
|
|
<option value="1941">1941</option>
|
|
<option value="1940">1940</option>
|
|
<option value="1939">1939</option>
|
|
<option value="1938">1938</option>
|
|
<option value="1937">1937</option>
|
|
<option value="1936">1936</option>
|
|
<option value="1935">1935</option>
|
|
<option value="1934">1934</option>
|
|
<option value="1933">1933</option>
|
|
<option value="1932">1932</option>
|
|
<option value="1931">1931</option>
|
|
<option value="1930">1930</option>
|
|
<option value="1929">1929</option>
|
|
<option value="1928">1928</option>
|
|
<option value="1927">1927</option>
|
|
<option value="1926">1926</option>
|
|
<option value="1925">1925</option>
|
|
<option value="1924">1924</option>
|
|
<option value="1923">1923</option>
|
|
<option value="1922">1922</option>
|
|
<option value="1921">1921</option>
|
|
<option value="1920">1920</option>
|
|
<option value="1919">1919</option>
|
|
<option value="1918">1918</option>
|
|
<option value="1917">1917</option>
|
|
<option value="1916">1916</option>
|
|
<option value="1915">1915</option>
|
|
<option value="1914">1914</option>
|
|
<option value="1913">1913</option>
|
|
<option value="1912">1912</option>
|
|
<option value="1911">1911</option>
|
|
<option value="1910">1910</option>
|
|
<option value="1909">1909</option>
|
|
<option value="1908">1908</option>
|
|
<option value="1907">1907</option>
|
|
<option value="1906">1906</option>
|
|
<option value="1905">1905</option>
|
|
<option value="1904">1904</option>
|
|
<option value="1903">1903</option>
|
|
<option value="1902">1902</option>
|
|
<option value="1901">1901</option>
|
|
<option value="1900">1900</option>
|
|
<option value="1899">1899</option>
|
|
<option value="1898">1898</option>
|
|
<option value="1897">1897</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Text mask</label>
|
|
<input type="text" name="input-mask" class="form-control" data-mask="00/00/0000" data-mask-visible="true" placeholder="00/00/0000" autocomplete="off"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Telephone mask</label>
|
|
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Autosize textarea</label>
|
|
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Datalist example</label>
|
|
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
|
|
<datalist id="datalistOptions">
|
|
<option value="Aruba"/>
|
|
<option value="Afghanistan"/>
|
|
<option value="Angola"/>
|
|
<option value="Anguilla"/>
|
|
<option value="Albania"/>
|
|
<option value="Andorra"/>
|
|
<option value="United Arab Emirates"/>
|
|
<option value="Argentina"/>
|
|
<option value="Armenia"/>
|
|
<option value="American Samoa"/>
|
|
</datalist>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input sizing</label>
|
|
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
|
|
<input class="form-control mb-2" type="text" placeholder="Default input">
|
|
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Range input</label>
|
|
<input type="range" class="form-range" min="0" max="10" step="1">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Progress</label>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">38% Complete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-right">
|
|
<div class="d-flex">
|
|
<a href="#" class="btn btn-link">Cancel</a>
|
|
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Libs JS -->
|
|
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
|
|
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
|
|
<script src="./dist/libs/autosize/dist/autosize.min.js?1578694044"></script>
|
|
<script src="./dist/libs/imask/dist/imask.min.js?1578694044"></script>
|
|
<script src="./dist/libs/selectize/dist/js/standalone/selectize.min.js?1578694044"></script>
|
|
<!-- Tabler Core -->
|
|
<script src="./dist/js/tabler.min.js?1578694044"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-tags').selectize({
|
|
maxItems: 15
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-users').selectize({
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-people').selectize({
|
|
render: {
|
|
option: function (data, escape) {
|
|
return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url(./' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
|
},
|
|
item: function (data, escape) {
|
|
return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url(./' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-countries').selectize({
|
|
render: {
|
|
option: function (data, escape) {
|
|
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
|
},
|
|
item: function (data, escape) {
|
|
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
const $elem = $('[data-mask]');
|
|
if ($elem) {
|
|
$elem.each(function () {
|
|
IMask($(this).get(0), {
|
|
mask: $(this).attr('data-mask'),
|
|
lazy: $(this).attr('data-mask-visible') === 'true',
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
if (window.autosize) {
|
|
(function () {
|
|
const elements = document.querySelectorAll('[data-toggle="autosize"]');
|
|
if (elements.length) {
|
|
elements.forEach(function (element) {
|
|
autosize(element);
|
|
});
|
|
}
|
|
})();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |