D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
vitalityhealth
/
public_html
/
s
/
Filename :
forms-advanced.html
back
Copy
<!doctype html><html class="fixed"> <head> <!-- Basic --> <meta charset="UTF-8"> <title>Advanced Forms | Porto Admin - Responsive HTML5 Template</title> <meta name="keywords" content="HTML5 Admin Template"> <meta name="description" content="Porto Admin - Responsive HTML5 Template"> <meta name="author" content="okler.net"> <!-- Mobile Metas --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Web Fonts --> <link href="../../../css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css"> <!-- Vendor CSS --> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="vendor/animate/animate.compat.css"> <link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"> <link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css"> <!-- Specific Page Vendor CSS --> <link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.css"> <link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.theme.css"> <link rel="stylesheet" href="vendor/select2/css/select2.css"> <link rel="stylesheet" href="vendor/select2-bootstrap-theme/select2-bootstrap.min.css"> <link rel="stylesheet" href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css"> <link rel="stylesheet" href="vendor/bootstrap-tagsinput/bootstrap-tagsinput.css"> <link rel="stylesheet" href="vendor/bootstrap-timepicker/css/bootstrap-timepicker.css"> <link rel="stylesheet" href="vendor/dropzone/basic.css"> <link rel="stylesheet" href="vendor/dropzone/dropzone.css"> <link rel="stylesheet" href="vendor/bootstrap-markdown/css/bootstrap-markdown.min.css"> <link rel="stylesheet" href="vendor/summernote/summernote-bs4.css"> <!-- Theme CSS --> <link rel="stylesheet" href="css/theme.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- Head Libs --> <script src="vendor/modernizr/modernizr.js"></script> <script src="master/style-switcher/style.switcher.localstorage.js"></script> </head> <body> <section class="body"> <!-- start: header --> <header class="header"> <div class="logo-container"> <a href="index.htm" class="logo"> <img src="img/logo.png" width="75" height="35" alt="Porto Admin"> </a> <div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <!-- start: search & user box --> <div class="header-right"> <form action="pages-search-results.html" class="search nav-form"> <div class="input-group"> <input type="text" class="form-control" name="q" id="q" placeholder="Search..."> <button class="btn btn-default" type="submit"><i class="bx bx-search"></i></button> </div> </form> <span class="separator"></span> <ul class="notifications"> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-list-ol"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu large"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Tasks </div> <div class="content"> <ul> <li> <p class="clearfix mb-1"> <span class="message float-start">Generating Sales Report</span> <span class="message float-end text-dark">60%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Importing Contacts</span> <span class="message float-end text-dark">98%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width: 98%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Uploading something big</span> <span class="message float-end text-dark">33%</span> </p> <div class="progress progress-xs light mb-1"> <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div> </div> </li> </ul> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-envelope"></i> <span class="badge">4</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">230</span> Messages </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Doe Junior" class="rounded-circle"> </figure> <span class="title">Joseph Doe</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message truncate">Truncated message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam, nec venenatis risus. Vestibulum blandit faucibus est et malesuada. Sed interdum cursus dui nec venenatis. Pellentesque non nisi lobortis, rutrum eros ut, convallis nisi. Sed tellus turpis, dignissim sit amet tristique quis, pretium id est. Sed aliquam diam diam, sit amet faucibus tellus ultricies eu. Aliquam lacinia nibh a metus bibendum, eu commodo eros commodo. Sed commodo molestie elit, a molestie lacus porttitor id. Donec facilisis varius sapien, ac fringilla velit porttitor et. Nam tincidunt gravida dui, sed pharetra odio pharetra nec. Duis consectetur venenatis pharetra. Vestibulum egestas nisi quis elementum elementum.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joe Junior" class="rounded-circle"> </figure> <span class="title">Joe Junior</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam.</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-bell"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Alerts </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-thumbs-down bg-danger text-light"></i> </div> <span class="title">Server is Down!</span> <span class="message">Just now</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="bx bx-lock bg-warning text-light"></i> </div> <span class="title">User Locked</span> <span class="message">15 minutes ago</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-signal bg-success text-light"></i> </div> <span class="title">Connection Restaured</span> <span class="message">10/10/2021</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> </ul> <span class="separator"></span> <div id="userbox" class="userbox"> <a href="#" data-bs-toggle="dropdown"> <figure class="profile-picture"> <img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg"> </figure> <div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@okler.com"> <span class="name">John Doe Junior</span> <span class="role">Administrator</span> </div> <i class="fa custom-caret"></i> </a> <div class="dropdown-menu"> <ul class="list-unstyled mb-2"> <li class="divider"></li> <li> <a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a> </li> <li> <a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a> </li> <li> <a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a> </li> </ul> </div> </div> </div> <!-- end: search & user box --> </header> <!-- end: header --> <div class="inner-wrapper"> <!-- start: sidebar --> <aside id="sidebar-left" class="sidebar-left"> <div class="sidebar-header"> <div class="sidebar-title"> Navigation </div> <div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <div class="nano"> <div class="nano-content"> <nav id="menu" class="nav-main" role="navigation"> <ul class="nav nav-main"> <li> <a class="nav-link" href="layouts-default.html"> <i class="bx bx-home-alt" aria-hidden="true"></i> <span>Dashboard</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-cart-alt" aria-hidden="true"></i> <span>eCommerce</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ecommerce-dashboard.html"> Dashboard </a> </li> <li> <a class="nav-link" href="ecommerce-products-list.html"> Products List </a> </li> <li> <a class="nav-link" href="ecommerce-products-form.html"> Products Form </a> </li> <li> <a class="nav-link" href="ecommerce-category-list.html"> Categories List </a> </li> <li> <a class="nav-link" href="ecommerce-category-form.html"> Category Form </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-list.html"> Coupons List </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-form.html"> Coupons Form </a> </li> <li> <a class="nav-link" href="ecommerce-orders-list.html"> Orders List </a> </li> <li> <a class="nav-link" href="ecommerce-orders-detail.html"> Orders Detail </a> </li> <li> <a class="nav-link" href="ecommerce-customers-list.html"> Customers List </a> </li> <li> <a class="nav-link" href="ecommerce-customers-form.html"> Customers Form </a> </li> </ul> </li> <li> <a class="nav-link" href="mailbox-folder.html"> <span class="float-end badge badge-primary">182</span> <i class="bx bx-envelope" aria-hidden="true"></i> <span>Mailbox</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-layout" aria-hidden="true"></i> <span>Layouts</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="index.html"> Landing Page </a> </li> <li> <a class="nav-link" href="layouts-default.html"> Default </a> </li> <li> <a class="nav-link" href="layouts-modern.html"> Modern </a> </li> <li class="nav-parent"> <a> Boxed </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-boxed.html"> Static Header </a> </li> <li> <a class="nav-link" href="layouts-boxed-fixed-header.html"> Fixed Header </a> </li> </ul> </li> <li class="nav-parent"> <a> Horizontal Menu Header </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-header-menu.html"> Pills </a> </li> <li> <a class="nav-link" href="layouts-header-menu-stripe.html"> Stripe </a> </li> <li> <a class="nav-link" href="layouts-header-menu-top-line.html"> Top Line </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-dark.html"> Dark </a> </li> <li> <a class="nav-link" href="layouts-dark-header.html"> Dark Header </a> </li> <li> <a class="nav-link" href="layouts-two-navigations.html"> Two Navigations </a> </li> <li class="nav-parent"> <a> Tab Navigation </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-tab-navigation-dark.html"> Tab Navigation Dark </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation.html"> Tab Navigation Light </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation-boxed.html"> Tab Navigation Boxed </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-light-sidebar.html"> Light Sidebar </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-collapsed.html"> Left Sidebar Collapsed </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-scroll.html"> Left Sidebar Scroll </a> </li> <li class="nav-parent"> <a> Left Sidebar Big Icons </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons.html"> Left Sidebar Big Icons Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons-light.html"> Left Sidebar Big Icons Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Panel </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-panel.html"> Left Sidebar Panel Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-panel-light.html"> Left Sidebar Panel Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Sizes </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-sidebar-sizes-xs.html"> Left Sidebar XS </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-sm.html"> Left Sidebar SM </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-md.html"> Left Sidebar MD </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-square-borders.html"> Square Borders </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-file" aria-hidden="true"></i> <span>Pages</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="pages-signup.html"> Sign Up </a> </li> <li> <a class="nav-link" href="pages-signin.html"> Sign In </a> </li> <li> <a class="nav-link" href="pages-recover-password.html"> Recover Password </a> </li> <li> <a class="nav-link" href="pages-lock-screen.html"> Locked Screen </a> </li> <li> <a class="nav-link" href="pages-user-profile.html"> User Profile </a> </li> <li> <a class="nav-link" href="pages-session-timeout.html"> Session Timeout </a> </li> <li> <a class="nav-link" href="pages-calendar.html"> Calendar </a> </li> <li> <a class="nav-link" href="pages-timeline.html"> Timeline </a> </li> <li> <a class="nav-link" href="pages-media-gallery.html"> Media Gallery </a> </li> <li> <a class="nav-link" href="pages-invoice.html"> Invoice </a> </li> <li> <a class="nav-link" href="pages-blank.html"> Blank Page </a> </li> <li> <a class="nav-link" href="pages-404.html"> 404 </a> </li> <li> <a class="nav-link" href="pages-500.html"> 500 </a> </li> <li> <a class="nav-link" href="pages-log-viewer.html"> Log Viewer </a> </li> <li> <a class="nav-link" href="pages-search-results.html"> Search Results </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-cube" aria-hidden="true"></i> <span>UI Elements</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-typography.html"> Typography </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Icons <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-1"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-icons-elusive.html"> Elusive </a> </li> <li> <a class="nav-link" href="ui-elements-icons-font-awesome.html"> Font Awesome </a> </li> <li> <a class="nav-link" href="ui-elements-icons-line-icons.html"> Line Icons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-meteocons.html"> Meteocons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-box-icons.html"> Box Icons </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-tabs.html"> Tabs </a> </li> <li> <a class="nav-link" href="ui-elements-cards.html"> Cards </a> </li> <li> <a class="nav-link" href="ui-elements-widgets.html"> Widgets </a> </li> <li> <a class="nav-link" href="ui-elements-portlets.html"> Portlets </a> </li> <li> <a class="nav-link" href="ui-elements-buttons.html"> Buttons </a> </li> <li> <a class="nav-link" href="ui-elements-alerts.html"> Alerts </a> </li> <li> <a class="nav-link" href="ui-elements-notifications.html"> Notifications </a> </li> <li> <a class="nav-link" href="ui-elements-modals.html"> Modals </a> </li> <li> <a class="nav-link" href="ui-elements-lightbox.html"> Lightbox </a> </li> <li> <a class="nav-link" href="ui-elements-progressbars.html"> Progress Bars </a> </li> <li> <a class="nav-link" href="ui-elements-sliders.html"> Sliders </a> </li> <li> <a class="nav-link" href="ui-elements-carousels.html"> Carousels </a> </li> <li> <a class="nav-link" href="ui-elements-accordions.html"> Accordions </a> </li> <li> <a class="nav-link" href="ui-elements-toggles.html"> Toggles </a> </li> <li> <a class="nav-link" href="ui-elements-nestable.html"> Nestable </a> </li> <li> <a class="nav-link" href="ui-elements-tree-view.html"> Tree View </a> </li> <li> <a class="nav-link" href="ui-elements-scrollable.html"> Scrollable </a> </li> <li> <a class="nav-link" href="ui-elements-grid-system.html"> Grid System </a> </li> <li> <a class="nav-link" href="ui-elements-charts.html"> Charts </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Animations <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-2"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-animations-appear.html"> Appear </a> </li> <li> <a class="nav-link" href="ui-elements-animations-hover.html"> Hover </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Loading <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-3"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-loading-overlay.html"> Overlay </a> </li> <li> <a class="nav-link" href="ui-elements-loading-progress.html"> Progress </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-extra.html"> Extra </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-map" aria-hidden="true"></i> <span>Maps</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="maps-google-maps.html"> Basic </a> </li> <li> <a class="nav-link" href="maps-google-maps-builder.html"> Map Builder </a> </li> <li> <a class="nav-link" href="maps-vector.html"> Vector </a> </li> </ul> </li> <li> <a class="nav-link" href="extra-ajax-made-easy.html"> <i class="bx bx-loader-circle" aria-hidden="true"></i> <span>Ajax</span> </a> </li> <li class="nav-parent nav-expanded nav-active"> <a class="nav-link" href="#"> <i class="bx bx-detail" aria-hidden="true"></i> <span>Forms</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="forms-basic.html"> Basic </a> </li> <li class="nav-active"> <a class="nav-link" href="forms-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="forms-validation.html"> Validation </a> </li> <li> <a class="nav-link" href="forms-layouts.html"> Layouts </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-table" aria-hidden="true"></i> <span>Tables</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="tables-basic.html"> Basic </a> </li> <li> <a class="nav-link" href="tables-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="tables-responsive.html"> Responsive </a> </li> <li> <a class="nav-link" href="tables-editable.html"> Editable </a> </li> <li> <a class="nav-link" href="tables-ajax.html"> Ajax </a> </li> <li> <a class="nav-link" href="tables-pricing.html"> Pricing </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-collection" aria-hidden="true"></i> <span>Menu Levels</span> </a> <ul class="nav nav-children"> <li> <a> First Level </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Second Level </a> <ul class="nav nav-children"> <li> <a> Second Level Link #1 </a> </li> <li> <a> Second Level Link #2 </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Third Level </a> <ul class="nav nav-children"> <li> <a> Third Level Link #1 </a> </li> <li> <a> Third Level Link #2 </a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a class="nav-link" href="http://themeforest.net/item/porto-responsive-html5-template/4106987?ref=Okler"> <i class="bx bx-window-alt" aria-hidden="true"></i> <span>Front-End <em class="not-included">(Not Included)</em></span> </a> </li> <li> <a class="nav-link" href="https://www.okler.net/forums/topic/porto-admin-changelog/"> <i class="bx bx-book-alt" aria-hidden="true"></i> <span>Changelog</span> </a> </li> </ul> </nav> <hr class="separator"> <div class="sidebar-widget widget-tasks"> <div class="widget-header"> <h6>Projects</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul class="list-unstyled m-0"> <li><a href="#">Porto HTML5 Template</a></li> <li><a href="#">Tucson Template</a></li> <li><a href="#">Porto Admin</a></li> </ul> </div> </div> <hr class="separator"> <div class="sidebar-widget widget-stats"> <div class="widget-header"> <h6>Company Stats</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul> <li> <span class="stats-title">Stat 1</span> <span class="stats-complete">85%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"> <span class="sr-only">85% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 2</span> <span class="stats-complete">70%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 3</span> <span class="stats-complete">2%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> <span class="sr-only">2% Complete</span> </div> </div> </li> </ul> </div> </div> </div> <script> // Maintain Scroll Position if (typeof localStorage !== 'undefined') { if (localStorage.getItem('sidebar-left-position') !== null) { var initialPosition = localStorage.getItem('sidebar-left-position'), sidebarLeft = document.querySelector('#sidebar-left .nano-content'); sidebarLeft.scrollTop = initialPosition; } } </script> </div> </aside> <!-- end: sidebar --> <section role="main" class="content-body card-margin"> <header class="page-header"> <h2>Advanced Forms</h2> <div class="right-wrapper text-end"> <ol class="breadcrumbs"> <li> <a href="index.html"> <i class="bx bx-home-alt"></i> </a> </li> <li><span>Forms</span></li> <li><span>Advanced</span></li> </ol> <a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fas fa-chevron-left"></i></a> </div> </header> <!-- start: page --> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Select Replacement</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered" action="#"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Basic select</label> <div class="col-lg-6"> <select data-plugin-selecttwo="" class="form-control populate"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Multi-Value Select</label> <div class="col-lg-6"> <select multiple="" data-plugin-selecttwo="" class="form-control populate"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Placeholders </label> <div class="col-lg-6"> <select data-plugin-selecttwo="" class="form-control populate placeholder" data-plugin-options='{ "placeholder": "Select a State", "allowClear": true }'> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2">Minimum Input</label> <div class="col-lg-6"> <select data-plugin-selecttwo="" class="form-control populate" data-plugin-options='{ "minimumInputLength": 2 }'> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option><option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Multi-select</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered" action="#"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Basic Multi-select</label> <div class="col-lg-6"> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200 }' id="ms_example0"> <option value="cheese">Cheese</option> <option value="tomatoes" selected="">Tomatoes</option> <option value="mozarella" selected="">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Basic Multi-select (Only One)</label> <div class="col-lg-6"> <select class="form-control" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200 }' id="ms_example1"> <option value="cheese" selected="">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">With Preselected Options</label> <div class="col-lg-6"> <select class="form-control" multiple="multiple" data-plugin-options='{ "maxHeight": 200 }' data-plugin-multiselect="" id="ms_example2"> <option value="cheese" selected="">Cheese</option> <option value="tomatoes" selected="">Tomatoes</option> <option value="mozarella" selected="">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Link button</label> <div class="col-lg-6"> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200, "buttonClass": "btn btn-link ps-0 pe-0" }' id="ms_example3"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">With icon</label> <div class="col-lg-6"> <div class="input-group input-group-select-append"> <span class="input-group-text"> <i class="fas fa-th-list"></i> </span> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200 }' id="ms_example4"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Select All Option</label> <div class="col-lg-6"> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200, "includeSelectAllOption": true }' id="ms_example5"> <optgroup label="Mathematics"> <option value="analysis">Analysis</option> <option value="algebra">Linear Algebra</option> <option value="discrete">Discrete Mathematics</option> <option value="numerical">Numerical Analysis</option> <option value="probability">Probability Theory</option> </optgroup> <optgroup label="Computer Science"> <option value="programming">Introduction to Programming</option> <option value="automata">Automata Theory</option> <option value="complexity">Complexity Theory</option> <option value="software">Software Engineering</option> </optgroup> </select> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">With Search</label> <div class="col-lg-6"> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200, "enableCaseInsensitiveFiltering": true }' id="ms_example6"> <optgroup label="Mathematics"> <option value="analysis">Analysis</option> <option value="algebra">Linear Algebra</option> <option value="discrete">Discrete Mathematics</option> <option value="numerical">Numerical Analysis</option> <option value="probability">Probability Theory</option> </optgroup> <optgroup label="Computer Science"> <option value="programming">Introduction to Programming</option> <option value="automata">Automata Theory</option> <option value="complexity">Complexity Theory</option> <option value="software">Software Engineering</option> </optgroup> </select> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2">Toggle All Button</label> <div class="col-lg-6"> <div class="btn-group"> <select class="form-control" multiple="multiple" data-plugin-multiselect="" data-plugin-options='{ "maxHeight": 200 }' data-multiselect-toggle-all="true" id="ms_example7"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> </div> <div class="btn-group me-2"> <button id="ms_example7-toggle" class="btn btn-primary ms-2">Select All</button> </div> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Tag Autocomplete</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered form-bordered"> <div class="form-group row pb-3"> <label for="tags-input" class="col-lg-3 control-label text-lg-end pt-2">Input Tags</label> <div class="col-lg-7"> <input name="tags" id="tags-input" data-role="tagsinput" data-tag-class="badge badge-primary" class="form-control" value="Amsterdam,Washington,Sydney,Beijing"> <p> Just add <code>data-role="tagsinput"</code> to your input field to automatically change it to a tags input field. </p> </div> </div> <div class="form-group row pb-2"> <label for="tags-input-multiple" class="col-lg-3 control-label text-lg-end pt-2">True multi value</label> <div class="col-lg-7"> <select id="tags-input-multiple" multiple="" data-role="tagsinput" data-tag-class="badge badge-primary"> <option value="Amsterdam">Amsterdam</option> <option value="Washington">Washington</option> <option value="Sydney">Sydney</option> <option value="Beijing">Beijing</option> </select> <p> Use a <code><select multiple /></code> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <code><option /></code> elements will automatically be set as tags. This makes it also possible to create tags containing a comma. </p> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Toggle Switches</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2 col-lg-3">Large</label> <div class="col-lg-9"> <div class="switch switch-lg switch-primary"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-lg switch-success"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-lg switch-warning"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-lg switch-danger"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-lg switch-info"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-lg switch-dark"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2 col-lg-3">Default</label> <div class="col-lg-9"> <div class="switch switch-primary"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-success"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-warning"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-danger"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-info"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-dark"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2 col-lg-3">Small</label> <div class="col-lg-9"> <div class="switch switch-sm switch-primary"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-sm switch-success"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-sm switch-warning"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-sm switch-danger"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-sm switch-info"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> <div class="switch switch-sm switch-dark"> <input type="checkbox" name="switch" data-plugin-ios-switch="" checked="checked"> </div> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Slider Range</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">One Value</label> <div class="col-lg-6"> <div class="m-md slider-primary" data-plugin-slider="" data-plugin-options='{ "value": 50, "range": "min", "max": 100 }' data-plugin-slider-output="#listenSlider" data-plugin-slider-link-values-to="#priceRangeValues1"> <input id="listenSlider" type="hidden" value="50"> </div> <p id="priceRangeValues1" class="price-range-values">The current <code>value</code> is: <b class="min">50</b></p> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2">Range</label> <div class="col-lg-6"> <div class="m-md slider-primary" data-plugin-slider="" data-plugin-options='{ "half_values": true, "values": [ 25, 75 ], "range": true, "max": 100 }' data-plugin-slider-output="#listenSlider2" data-plugin-slider-link-values-to="#priceRangeValues2"> <input id="listenSlider2" type="hidden" value="25, 75"> </div> <p id="priceRangeValues2" class="price-range-values">The <code>min</code> is: <b class="min">25</b> and the <code>max</code> is: <b class="max">75</b></p> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Spinners</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered" action="#"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Default Spinner</label> <div class="col-lg-6"> <div data-plugin-spinner=""> <div class="input-group form-control-small"> <input type="text" class="spinner-input form-control" readonly="readonly"> <div class="spinner-buttons input-group-btn btn-group-vertical"> <button type="button" class="btn spinner-up btn-xs btn-default"> <i class="fas fa-angle-up"></i> </button> <button type="button" class="btn spinner-down btn-xs btn-default"> <i class="fas fa-angle-down"></i> </button> </div> </div> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Disabled</label> <div class="col-lg-6"> <div data-plugin-spinner="" data-plugin-options='{ "disabled": true }'> <div class="input-group form-control-small"> <input type="text" class="spinner-input form-control" maxlength="3" readonly=""> <div class="spinner-buttons input-group-btn btn-group-vertical"> <button type="button" class="btn spinner-up btn-xs"> <i class="fas fa-angle-up"></i> </button> <button type="button" class="btn spinner-down btn-xs"> <i class="fas fa-angle-down"></i> </button> </div> </div> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Horizontal buttons</label> <div class="col-lg-6"> <div data-plugin-spinner="" data-plugin-options='{ "value":0, "min": 0, "max": 10 }'> <div class="input-group" style="width:150px;"> <input type="text" class="spinner-input form-control" maxlength="3" readonly=""> <div class="btn-group"> <button type="button" class="btn btn-default spinner-up"> <i class="fas fa-angle-up"></i> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default spinner-down"> <i class="fas fa-angle-down"></i> </button> </div> </div> </div> <p> with <code>max</code> value set to 10 </p> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2">Alternative</label> <div class="col-lg-6"> <div data-plugin-spinner="" data-plugin-options='{ "value":0, "step": 5, "min": 0, "max": 200 }'> <div class="input-group"> <button type="button" class="btn btn-default spinner-up"> <i class="fas fa-plus"></i> </button> <input type="text" class="spinner-input form-control" maxlength="3" readonly=""> <button type="button" class="btn btn-default spinner-down"> <i class="fas fa-minus"></i> </button> </div> </div> <p> with <code>step</code> set to 5 </p> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Masked Inputs</h2> <p class="card-subtitle"> Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc). </p> </header> <div class="card-body"> <div class="form-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Date</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-calendar-alt"></i> </span> <input id="date" data-plugin-masked-input="" data-input-mask="99/99/9999" placeholder="__/__/____" class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Phone</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-phone"></i> </span> <input id="phone" data-plugin-masked-input="" data-input-mask="(999) 999-9999" placeholder="(123) 123-1234" class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Product Key</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-tag"></i> </span> <input id="product-key" data-plugin-masked-input="" data-input-mask="(aa) 99-999" placeholder="(ab) 12-123" class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2" for="fc_inputmask_1">SSN</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-plus"></i> </span> <input id="fc_inputmask_1" data-plugin-masked-input="" data-input-mask="999-99-9999" placeholder="___-__-____" class="form-control"> </div> </div> </div> </form></div> </form> </div> </section> </div> </div> <div class="row"> <div class="col-lg-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Date Picker</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Default Datepicker</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-calendar-alt"></i> </span> <input type="text" data-plugin-datepicker="" class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Date range</label> <div class="col-lg-6"> <div class="input-daterange input-group" data-plugin-datepicker=""> <span class="input-group-text"> <i class="fas fa-calendar-alt"></i> </span> <input type="text" class="form-control" name="start"> <span class="input-group-text border-start-0 border-end-0 rounded-0"> to </span> <input type="text" class="form-control" name="end"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Multiple dates</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-calendar-alt"></i> </span> <input type="text" data-plugin-datepicker="" data-plugin-options='{ "multidate": true }' class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Inline</label> <div class="col-lg-3"> <div data-plugin-datepicker="" data-plugin-skin="primary"> </div> </div> </div></form> </div> </section> </div> </div> <div class="row"> <div class="col-lg-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Time Pickers</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Default Time Picker</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="far fa-clock"></i> </span> <input type="text" data-plugin-timepicker="" class="form-control"> </div> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">24 Hour Mode Time Picker</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="far fa-clock"></i> </span> <input type="text" data-plugin-timepicker="" class="form-control" data-plugin-options='{ "showMeridian": false }'> </div> </div> </div> <div class="form-group row pb-2"> <label class="col-lg-3 control-label text-lg-end pt-2">Specify a step for the minute field</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-text"> <i class="far fa-clock"></i> </span> <input type="text" data-plugin-timepicker="" class="form-control" data-plugin-options='{ "minuteStep": 15 }'> </div> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col-lg-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Color Pickers</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered" action="#"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Default</label> <div class="col-lg-6"> <input class="border-0 mt-1" type="color" id="colorpicker" name="color" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="#0088cc"> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col-lg-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">MaxLength Control</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered form-bordered" action="#"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2" for="textareaDefault">Input</label> <div class="col-lg-6"> <input class="form-control" data-plugin-maxlength="" maxlength="20"> <p> <code>max-length</code> set to 20. </p> </div> </div> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2" for="textareaDefault">Textarea</label> <div class="col-lg-6"> <textarea class="form-control" rows="3" data-plugin-maxlength="" maxlength="140"></textarea> <p> <code>max-length</code> set to 140. </p> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">File Upload Drag'n Drop</h2> </header> <div class="card-body"> <form action="/upload" class="dropzone dz-square" id="dropzone-example"></form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">WYSIWYG Editors</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Summernote</label> <div class="col-lg-9"> <div class="summernote" data-plugin-summernote="" data-plugin-options='{ "height": 180 }'><p>Start typing...</p></div> </div> </div> </form> </div> </section> </div> </div> <div class="row"> <div class="col"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Markdown Editor</h2> </header> <div class="card-body"> <form class="form-horizontal form-bordered"> <div class="form-group row pb-3"> <label class="col-lg-3 control-label text-lg-end pt-2">Bootstrap Markdown</label> <div class="col-lg-9"> <textarea name="content" data-plugin-markdown-editor="" rows="10">Start typing...</textarea> </div> </div> </form> </div> </section> </div> </div> <!-- end: page --> </section> </div> <aside id="sidebar-right" class="sidebar-right"> <div class="nano"> <div class="nano-content"> <a href="#" class="mobile-close d-md-none"> Collapse <i class="fas fa-chevron-right"></i> </a> <div class="sidebar-right-wrapper"> <div class="sidebar-widget widget-calendar"> <h6>Upcoming Tasks</h6> <div data-plugin-datepicker="" data-plugin-skin="dark"></div> <ul> <li> <time datetime="2021-04-19T00:00+00:00">04/19/2021</time> <span>Company Meeting</span> </li> </ul> </div> <div class="sidebar-widget widget-friends"> <h6>Friends</h6> <ul> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> </ul> </div> </div> </div> </div> </aside> </section> <!-- Vendor --> <script src="vendor/jquery/jquery.js"></script> <script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script> <script src="vendor/jquery-cookie/jquery.cookie.js"></script> <script src="master/style-switcher/style.switcher.js"></script> <script src="vendor/popper/umd/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script src="vendor/common/common.js"></script> <script src="vendor/nanoscroller/nanoscroller.js"></script> <script src="vendor/magnific-popup/jquery.magnific-popup.js"></script> <script src="vendor/jquery-placeholder/jquery.placeholder.js"></script> <!-- Specific Page Vendor --> <script src="vendor/jquery-ui/jquery-ui.js"></script> <script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script> <script src="vendor/select2/js/select2.js"></script> <script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script> <script src="vendor/jquery-maskedinput/jquery.maskedinput.js"></script> <script src="vendor/bootstrap-tagsinput/bootstrap-tagsinput.js"></script> <script src="vendor/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> <script src="vendor/fuelux/js/spinner.js"></script> <script src="vendor/dropzone/dropzone.js"></script> <script src="vendor/bootstrap-markdown/js/markdown.js"></script> <script src="vendor/bootstrap-markdown/js/to-markdown.js"></script> <script src="vendor/bootstrap-markdown/js/bootstrap-markdown.js"></script> <script src="vendor/summernote/summernote-bs4.js"></script> <script src="vendor/bootstrap-maxlength/bootstrap-maxlength.js"></script> <script src="vendor/ios7-switch/ios7-switch.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script> <!-- Analytics to Track Preview Website --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-42715764-8', 'auto'); ga('send', 'pageview'); </script> <!-- Examples --> <script src="js/examples/examples.advanced.form.js"></script> </body> </html>