Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-20 14:20:09 +04:00
Code Issues Projects Releases Wiki Activity
Files
68b8d71526680c0fd4b8bec48da97d260bd9bc49
tabler/dist/docs/form-components.html
T
codecalm 0f316de5ef dist
2018-02-14 22:04:13 +01:00

718 lines
41 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<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">
<title>Form components - Documentation - tabler.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
<script>
requirejs.config({
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
<a class="navbar-brand" href="#">
<img src="./assets/images/logo.svg" class="navbar-brand-img" alt="tabler.io">
<span class="d-none d-lg-inline-block">Bootstrap</span>
</a>
<div class="nav order-lg-2">
<div class="nav-item">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
<a class="nav-link icon">
<i class="fe fe-maximize"></i>
</a>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-message-square"></i>
<span class="badge badge-pill badge-danger">1</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="badge badge-pill badge-danger">10</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<span class="avatar" style="background-image: url(assets/images/faces/female/25.jpg)"></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default">Jane Pearson</span>
<small class="text-muted d-block mt-1">Administrator</small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Profile</span>
</a>
<a class="dropdown-item" href="#">
<span>Settings</span>
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<span>Inbox</span>
</a>
<a class="dropdown-item" href="#">
<span>Message</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Need help? </a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
<div class="dropdown-menu mt-2 text-color" role="menu">
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../." class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="../profile.html" class="nav-link"><i class="fe fe-user"></i> Profile</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
<div class="input-icon-addon">
<i class="fe fe-search"></i>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<ul class="list">
<li><a href="../docs/blog.html">Blog components</a></li>
<li><a href="../docs/buttons.html">Buttons</a></li>
<li><a href="../docs/charts.html">Charts</a></li>
<li><a href="../docs/form-components.html">Form components</a></li>
<li><a href="../docs/index.html">Getting started</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap">
<h2 class="mt-0 mb-4">Form components</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h3 id="color-input">Color input</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="example">
<div class="form-group">
<label class="form-label">Color Input</label>
<div class="d-flex">
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="azure" class="colorinput-input" />
<span class="colorinput-color bg-azure"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
<span class="colorinput-color bg-indigo"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="purple" class="colorinput-input" />
<span class="colorinput-color bg-purple"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="pink" class="colorinput-input" />
<span class="colorinput-color bg-pink"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="red" class="colorinput-input" />
<span class="colorinput-color bg-red"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="orange" class="colorinput-input" />
<span class="colorinput-color bg-orange"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="yellow" class="colorinput-input" />
<span class="colorinput-color bg-yellow"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="lime" class="colorinput-input" />
<span class="colorinput-color bg-lime"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="green" class="colorinput-input" />
<span class="colorinput-color bg-green"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="teal" class="colorinput-input" />
<span class="colorinput-color bg-teal"></span>
</label>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"teal"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="image-input">Image input</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="example">
<div class="form-group">
<label class="form-label">Image Check</label>
<div class="row sm-gutters">
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/female/12.jpg" alt="Amanda Hunt" class="imagecheck-image" />
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked="" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/female/21.jpg" alt="Laura Weaver" class="imagecheck-image" />
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/female/29.jpg" alt="Margaret Berry" class="imagecheck-image" />
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="4" class="imagecheck-input" checked="" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/female/2.jpg" alt="Nancy Herrera" class="imagecheck-image" />
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/male/34.jpg" alt="Edward Larson" class="imagecheck-image" />
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
<figure class="imagecheck-figure">
<img src="../assets/images/faces/female/11.jpg" alt="Joan Hanson" class="imagecheck-image" />
</figure>
</label>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row sm-gutters"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/female/12.jpg"</span> <span class="na">alt=</span><span class="s">"Amanda Hunt"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="na">checked</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/female/21.jpg"</span> <span class="na">alt=</span><span class="s">"Laura Weaver"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/female/29.jpg"</span> <span class="na">alt=</span><span class="s">"Margaret Berry"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="na">checked</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/female/2.jpg"</span> <span class="na">alt=</span><span class="s">"Nancy Herrera"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/male/34.jpg"</span> <span class="na">alt=</span><span class="s">"Edward Larson"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./assets/images/faces/female/11.jpg"</span> <span class="na">alt=</span><span class="s">"Joan Hanson"</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="icon-input">Icon input</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="example">
<div class="form-group">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for..." />
<span class="input-icon-addon">
<i class="fe fe-search"></i>
</span>
</div>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fe fe-user"></i>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-search"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-user"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="toggle-switches">Toggle switches</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="example">
<div class="form-group">
<div class="form-label">Toggle switches</div>
<div class="custom-switches-stacked">
<label class="custom-switch">
<input type="radio" name="option" value="1" class="custom-switch-input" checked="" />
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 1</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="2" class="custom-switch-input" />
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 2</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="3" class="custom-switch-input" />
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 3</span>
</label>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Toggle switches<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-switches-stacked"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"option"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"custom-switch-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-indicator"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-description"</span><span class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"option"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"custom-switch-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-indicator"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-description"</span><span class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"option"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"custom-switch-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-indicator"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-description"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="form-fieldset">Form fieldset</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="example">
<fieldset class="form-fieldset">
<div class="form-group">
<label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" />
</div>
<div class="form-group mb-0">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control" />
</div>
</fieldset>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Company<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Phone number<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span></code></pre></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Advertise</a></li>
<li><a href="..">Help Center</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Invite friends</a></li>
<li><a href="..">Tag photos</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Stock photos</a></li>
<li><a href="..">Photobooks</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Press Kit</a></li>
<li><a href="..">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequatur corporis debitis dolore doloribus esse.
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html">Documentation</a></li>
<li class="list-inline-item"><a href="../faq.html">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
</div>
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
Copyright © 2018 <a href="..">tabler.io</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink