mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
1742 lines
106 KiB
HTML
1742 lines
106 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version 1.0.0-alpha.3
|
|
* @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 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?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/selectize/dist/css/selectize.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/core/main.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/list/main.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580915872" rel="stylesheet"/>
|
|
<!-- Tabler Core -->
|
|
<link href="./dist/css/tabler.min.css?1580915872" rel="stylesheet"/>
|
|
<!-- Tabler Plugins -->
|
|
<link href="./dist/css/tabler-flags.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-payments.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-buttons.min.css?1580915872" rel="stylesheet"/>
|
|
<link href="./dist/css/demo.min.css?1580915872" rel="stylesheet"/>
|
|
</head>
|
|
<body class="antialiased">
|
|
<div class="page">
|
|
<nav class="navbar navbar-expand-lg navbar-dark navbar-primary" id="navbar-primary">
|
|
<div class="container">
|
|
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
|
|
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
|
<img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
|
</a>
|
|
<div class="navbar-collapse collapse">
|
|
<h6 class="navbar-heading">Navigation</h6>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./index.html" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="./form-elements.html" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Forms</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Base</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-2">
|
|
<li >
|
|
<a class="dropdown-item" href="./blank.html" >
|
|
Starter page
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./buttons.html" >
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./cards.html" >
|
|
Cards
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./charts.html" >
|
|
Charts
|
|
</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="./lists.html" >
|
|
Lists
|
|
</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>
|
|
<li class="dropright">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
|
|
Authentication
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
|
|
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
|
|
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
|
|
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
|
|
</div>
|
|
</li>
|
|
<li class="dropright">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
|
|
Error pages
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./400.html" class="dropdown-item">400 page</a>
|
|
<a href="./401.html" class="dropdown-item">401 page</a>
|
|
<a href="./403.html" class="dropdown-item">403 page</a>
|
|
<a href="./404.html" class="dropdown-item">404 page</a>
|
|
<a href="./500.html" class="dropdown-item">500 page</a>
|
|
<a href="./503.html" class="dropdown-item">503 page</a>
|
|
<a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./layouts.html" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Layouts</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Extra</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-arrow">
|
|
<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="./snippets.html" >
|
|
Snippets
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./search-results.html" >
|
|
Search results
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
|
|
aria-expanded="false" >
|
|
<span class="nav-link-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>
|
|
<span class="nav-link-title">Docs</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-3">
|
|
<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/range-slider.html" >
|
|
Range slider
|
|
</a>
|
|
</li>
|
|
<li >
|
|
<a class="dropdown-item" href="./docs/ribbons.html" >
|
|
Ribbons
|
|
</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>
|
|
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
|
|
<a href="#" class="nav-link disabled">
|
|
<span class="nav-link-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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
|
</span>
|
|
<span class="nav-link-title">Customize</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h6 class="navbar-heading mt-4">Tools</h6>
|
|
<div class="navbar-side d-none-navbar-vertical-narrow">
|
|
<div class="d-none d-xl-block ml-auto">
|
|
<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>
|
|
<a href="#" class="btn btn-primary d-none-navbar-horizontal btn-block">
|
|
<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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
|
Customize
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
|
|
<div class="container">
|
|
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
|
|
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
|
<img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
|
</a>
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Dropdown
|
|
</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-item-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>
|
|
Action
|
|
</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-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
|
|
Another action
|
|
</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-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
|
Separated link</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<div class="content">
|
|
<main class="container">
|
|
<!-- Page title -->
|
|
<div class="page-header">
|
|
<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>
|
|
<div class="form-hint">Here's some more info.</div>
|
|
<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 mb-2">
|
|
<input type="text" class="form-control" placeholder="Search for…">
|
|
<span class="input-group-append">
|
|
<button class="btn btn-secondary" type="button">Go!</button>
|
|
</span>
|
|
</div>
|
|
<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">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-secondary">Action</button>
|
|
<button data-toggle="dropdown" type="button" class="btn btn-secondary 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"><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>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Loader input</label>
|
|
<div class="input-icon mb-3">
|
|
<input type="text" class="form-control" placeholder="Loading…">
|
|
<span class="input-icon-addon">
|
|
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
|
|
</span>
|
|
</div>
|
|
<div class="input-icon mb-3">
|
|
<span class="input-icon-addon">
|
|
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Loading…">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Separated inputs</label>
|
|
<div class="row row-sm">
|
|
<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" aria-label="Button">
|
|
<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">Input with help icon</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">Form control rounded</label>
|
|
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
|
|
<div class="input-icon">
|
|
<input type="text" class="form-control form-control-rounded" 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>
|
|
<div class="mb-3">
|
|
<label class="form-label">Form control flush</label>
|
|
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input group</label>
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
@
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="username" >
|
|
</div>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" placeholder="subdomain" >
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
.tabler.io
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
https://
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="subdomain" >
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
.tabler.io
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input with checkbox or radios</label>
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
<input class="form-check-input m-0" type="checkbox" checked>
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" >
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" >
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<input class="form-check-input m-0" type="radio" checked>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input with prepended text</label>
|
|
<div class="input-group input-group-flat">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
https://tabler.io/users/
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control pl-0" value="yourfancyusername">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input with appended text</label>
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control text-right pr-0" value="yourfancydomain">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
.tabler.io
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input with appended link</label>
|
|
<div class="input-group input-group-flat">
|
|
<input type="password" class="form-control" value="ultrastrongpassword">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<a href="#" class="input-group-link">Show password</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Input with appended icon links</label>
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control" >
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><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>
|
|
</a>
|
|
<a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><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="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
|
</a>
|
|
<a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><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 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</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">
|
|
<label class="form-label">Image Check</label>
|
|
<div class="row row-sm">
|
|
<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/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" 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/3d2998219313cd37.jpg" alt="Book, fairy lights" 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/6ab3200b14549f8a.jpg" alt="Healthy Dinner" 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/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" 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/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" 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/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" 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="7" class="form-imagecheck-input" checked/>
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" 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="8" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" 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="9" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<img src="./static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color Input</label>
|
|
<div class="row row-sm">
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="dark" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-dark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput form-colorinput-light">
|
|
<input name="color" type="checkbox" value="white" class="form-colorinput-input" checked/>
|
|
<span class="form-colorinput-color bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="checkbox" value="blue" class="form-colorinput-input" checked/>
|
|
<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>
|
|
</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-2" placeholder="Valid State..">
|
|
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
|
|
<div class="invalid-feedback">Invalid feedback</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Subtle validation States</label>
|
|
<input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
|
|
<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
|
|
</div>
|
|
<label class="form-label">Form fieldset</label>
|
|
<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>
|
|
<div class="col-md-6 col-xl-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Simple selectgroup</label>
|
|
<div class="form-selectgroup">
|
|
<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">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">Selectgroup with icons and text</label>
|
|
<div class="form-selectgroup">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="icons" value="home" 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 mr-1"><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>
|
|
Home</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="icons" value="users" 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 mr-1"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
|
Users</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="icons" value="circle" 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 mr-1"><circle cx="12" cy="12" r="10"></circle></svg>
|
|
Circle</span>
|
|
</label>
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="icons" value="square" 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 mr-1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
|
|
Square</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Different style</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">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>
|
|
ending in <strong>7998</strong>
|
|
</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>
|
|
</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">
|
|
<label class="form-label">Checkboxes with description</label>
|
|
<label class="form-check form-check-highlight mb-2">
|
|
<input class="form-check-input" type="checkbox">
|
|
<div class="form-check-label">
|
|
Default checkbox
|
|
</div>
|
|
<div class="form-check-description">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</div>
|
|
</label>
|
|
<label class="form-check form-check-highlight mb-2">
|
|
<input class="form-check-input" type="checkbox">
|
|
<div class="form-check-label">
|
|
Longer checkbox item that wraps on to two separate lines
|
|
</div>
|
|
<div class="form-check-description">
|
|
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
|
|
</div>
|
|
</label>
|
|
<label class="form-check form-check-highlight">
|
|
<input class="form-check-input" type="checkbox">
|
|
<div class="form-check-label">
|
|
Default checkbox without description
|
|
</div>
|
|
</label>
|
|
</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-sm">
|
|
<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">Range input</label>
|
|
<input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10">
|
|
<div class="form-range mb-2" id="range-simple"></div>
|
|
<div class="form-range mb-2" id="range-connect"></div>
|
|
<div class="form-range mb-2 text-green" id="range-color"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Datepicker</label>
|
|
<input id="calendar-simple" type="date" value="2020-06-20" class="form-control mb-2" placeholder="Select a date" />
|
|
<div class="input-icon">
|
|
<input id="calendar-time" type="date" value="2020-06-20" class="form-control" placeholder="Select a date" />
|
|
<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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Inline datepicker</label>
|
|
<div id="calendar-inline"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Progress</label>
|
|
<div class="progress mb-2">
|
|
<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 class="progress">
|
|
<div class="progress-bar progress-bar-indeterminate bg-green"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Form buttons</label>
|
|
<div class="btn-list">
|
|
<a href="#" class="btn btn-secondary btn-block">
|
|
<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>
|
|
Login with Github
|
|
</a>
|
|
<a href="#" class="btn btn-secondary btn-block">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" fill="currentColor">
|
|
<path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
|
|
</svg>
|
|
Login with Twitter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tags input</label>
|
|
<select name="tags" id="select-tags" class="form-select" multiple>
|
|
<option value="HTML" selected>HTML</option>
|
|
<option value="JavaScript" selected>JavaScript</option>
|
|
<option value="CSS">CSS</option>
|
|
<option value="jQuery">jQuery</option>
|
|
<option value="Bootstrap" selected>Bootstrap</option>
|
|
<option value="Ruby">Ruby</option>
|
|
<option value="Python">Python</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Advanced tags input</label>
|
|
<select name="tags-advanced" id="select-tags-advanced" class="form-select" multiple>
|
|
<option value="HTML">HTML</option>
|
|
<option value="JavaScript">JavaScript</option>
|
|
<option value="CSS">CSS</option>
|
|
<option value="jQuery">jQuery</option>
|
|
<option value="Bootstrap">Bootstrap</option>
|
|
<option value="Ruby" selected>Ruby</option>
|
|
<option value="Python" selected>Python</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Advanced select</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">Select with avatars</label>
|
|
<select name="people" id="select-people" class="form-select">
|
|
<option value="1" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
|
|
<option value="2" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">JL</span>"}'>Jeffie Lewzey</option>
|
|
<option value="3" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
|
|
<option value="4" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
|
|
<option value="5" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
|
|
<option value="6" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
|
|
<option value="7" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">EP</span>"}'>Egan Poetz</option>
|
|
<option value="8" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
|
|
<option value="9" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
|
|
<option value="10" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">HS</span>"}'>Haskel Shelper</option>
|
|
<option value="11" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
|
|
<option value="12" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
|
|
<option value="13" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
|
|
<option value="14" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">SA</span>"}'>Sunny Airey</option>
|
|
<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
|
|
<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
|
|
<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
|
|
<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
|
|
<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">AA</span>"}'>Arlie Armstead</option>
|
|
<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Select with flags</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>
|
|
</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>
|
|
<!-- Libs JS -->
|
|
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580915872"></script>
|
|
<script src="./dist/libs/autosize/dist/autosize.min.js?1580915872"></script>
|
|
<script src="./dist/libs/imask/dist/imask.min.js?1580915872"></script>
|
|
<script src="./dist/libs/selectize/dist/js/standalone/selectize.min.js?1580915872"></script>
|
|
<script src="./dist/libs/flatpickr/dist/flatpickr.min.js?1580915872"></script>
|
|
<script src="./dist/libs/flatpickr/dist/plugins/rangePlugin.js?1580915872"></script>
|
|
<script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580915872"></script>
|
|
<!-- Tabler Core -->
|
|
<script src="./dist/js/tabler.min.js?1580915872"></script>
|
|
<script src="./dist/js/tabler-range-sliders.min.js?1580915872"></script>
|
|
<script>
|
|
// @formatter:off
|
|
noUiSlider.create(document.getElementById('range-simple'), {
|
|
start: 20,
|
|
connect: [true, false],
|
|
step: 10,
|
|
range: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
noUiSlider.create(document.getElementById('range-connect'), {
|
|
start: [60, 90],
|
|
connect: [false, true, false],
|
|
step: 10,
|
|
range: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
noUiSlider.create(document.getElementById('range-color'), {
|
|
start: 40,
|
|
connect: [true, false],
|
|
step: 10,
|
|
range: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
flatpickr(document.getElementById('calendar-simple'), {
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
flatpickr(document.getElementById('calendar-time'), {
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
flatpickr(document.getElementById('calendar-inline'), {
|
|
inline: true,
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-tags').selectize({
|
|
maxItems: 15,
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-tags-advanced').selectize({
|
|
maxItems: 15,
|
|
plugins: ['remove_button'],
|
|
});
|
|
});
|
|
</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">' + data.avatar + '' + escape(data.text) + '</div>';
|
|
},
|
|
item: function (data, escape) {
|
|
return '<div class="d-flex align-items-center">' + data.avatar + '' + 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 () {
|
|
/**
|
|
* Input mask
|
|
*/
|
|
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
|
|
maskElementList.map(function (maskEl) {
|
|
console.log('maskEl', maskEl);
|
|
return new IMask(maskEl, {
|
|
mask: maskEl.dataset.mask,
|
|
lazy: maskEl.dataset['mask-visible'] === 'true'
|
|
})
|
|
});
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
const elements = document.querySelectorAll('[data-toggle="autosize"]');
|
|
if (elements.length) {
|
|
elements.forEach(function (element) {
|
|
autosize(element);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |