File size: 33.08Kb
<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wowdash - Bootstrap 5 Admin Dashboard HTML Template</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png" sizes="16x16">
<!-- All library css -->
<link rel="stylesheet" href="assets/css/remixicon.css">
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/prism.css">
<!-- main css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside class="sidebar">
<div>
<a href="index.html" class="sidebar-logo">
<img src="assets/images/logo.png" alt="site logo" class="light-logo">
<img src="assets/images/logo-light.png" alt="site logo" class="dark-logo">
<img src="assets/images/logo-icon.png" alt="site logo" class="logo-icon">
</a>
</div>
<div class="sidebar-menu-area">
<ul class="sidebar-menu" id="sidebar-menu">
<li class="sidebar-menu-group-title">Getting Started</li>
<li>
<a href="index.html">
<iconify-icon icon="solar:document-add-outline" class="menu-icon"></iconify-icon>
<span>Introduction</span>
</a>
</li>
<li>
<a href="started.html">
<iconify-icon icon="hugeicons:start-up-02" class="menu-icon"></iconify-icon>
<span>Gettings Started</span>
</a>
</li>
<li class="sidebar-menu-group-title">Layout Structure</li>
<li>
<a href="html.html">
<iconify-icon icon="icomoon-free:html-five2" class="menu-icon"></iconify-icon>
<span>HTML Structure</span>
</a>
</li>
<li>
<a href="dark.html">
<iconify-icon icon="line-md:moon" class="menu-icon"></iconify-icon>
<span>Dark Layout</span>
</a>
</li>
<li>
<a href="rtl.html">
<iconify-icon icon="mdi:rtl" class="menu-icon"></iconify-icon>
<span>RTL Layout</span>
</a>
</li>
<li class="sidebar-menu-group-title">Folder Structure</li>
<li>
<a href="css.html">
<iconify-icon icon="bi:filetype-css" class="menu-icon"></iconify-icon>
<span>CSS</span>
</a>
</li>
<li>
<a href="scss.html">
<iconify-icon icon="bi:filetype-scss" class="menu-icon"></iconify-icon>
<span>SCSS</span>
</a>
</li>
<li>
<a href="js.html">
<iconify-icon icon="fluent:document-javascript-24-regular" class="menu-icon"></iconify-icon>
<span>JavaScript</span>
</a>
</li>
<li class="sidebar-menu-group-title">Components</li>
<li>
<a href="basic-components.html">
<iconify-icon icon="cil:list" class="menu-icon"></iconify-icon>
<span>Basic Components</span>
</a>
</li>
<li>
<a href="advance-components.html">
<iconify-icon icon="tdesign:tree-list" class="menu-icon"></iconify-icon>
<span>Advance Components</span>
</a>
</li>
<li>
<a href="forms.html">
<iconify-icon icon="fluent:form-48-regular" class="menu-icon"></iconify-icon>
<span>Forms</span>
</a>
</li>
<li>
<a href="tables.html">
<iconify-icon icon="mynaui:table" class="menu-icon"></iconify-icon>
<span>Tables</span>
</a>
</li>
</ul>
</div>
</aside>
<main class="dashboard-main">
<div class="navbar-header">
<div class="row align-items-center justify-content-between">
<div class="col-auto">
<h6 class="text-xl mb-0">Documentation</h6>
</div>
<div class="col-auto">
<div class="d-flex flex-wrap align-items-center gap-3">
<button type="button" data-theme-toggle
class="w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center"></button>
</div>
</div>
</div>
</div>
<div class="dashboard-main-body">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Forms</h5>
</div>
<div class="card-body">
<h6 class="text-xl" id="button">Default Inputs</h6>
<div class="row gy-3 mb-24">
<div class="col-12">
<label class="form-label">Basic Input</label>
<input type="text" name="#0" class="form-control">
</div>
<div class="col-12">
<label class="form-label">Input with Placeholder</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input with Phone </label>
<input type="text" class="form-control flex-grow-1" placeholder="+1 (555) 253-08515">
</div>
<div class="col-12">
<label class="form-label">Input Date</label>
<input type="date" name="#0" class="form-control" placeholder="mm/dd/yyyy">
</div>
<div class="col-12">
<label class="form-label">Input with Payment</label>
<div class="input-group">
<span class="input-group-text bg-base">
<img src="assets/images/card/payment-icon.png" alt="image">
</span>
<input type="text" class="form-control flex-grow-1" placeholder="Card number">
</div>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#basicFormCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="basicFormCode">
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Basic Input</label>
<input type="text" name="#0" class="form-control">
</div>
<div class="col-12">
<label class="form-label">Input with Placeholder</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input with Phone </label>
<input type="text" class="form-control flex-grow-1" placeholder="+1 (555) 253-08515">
</div>
<div class="col-12">
<label class="form-label">Input Date</label>
<input type="date" name="#0" class="form-control" placeholder="mm/dd/yyyy">
</div>
<div class="col-12">
<label class="form-label">Input with Payment</label>
<div class="input-group">
<span class="input-group-text bg-base">
<img src="assets/images/card/payment-icon.png" alt="image">
</span>
<input type="text" class="form-control flex-grow-1" placeholder="Card number">
</div>
</div>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Input Group</h6>
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base">
<iconify-icon icon="mynaui:envelope"></iconify-icon>
</span>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base"> http:// </span>
<input type="text" class="form-control" placeholder="www.random.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="www.random.com">
<button type="button" class="input-group-text bg-base"><iconify-icon icon="lucide:copy"></iconify-icon> Copy</button>
</div>
<p class="text-sm mt-1 mb-0">This is a hint text to help user.</p>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeTwo" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="formCodeTwo">
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base">
<iconify-icon icon="mynaui:envelope"></iconify-icon>
</span>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base"> http:// </span>
<input type="text" class="form-control" placeholder="www.random.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="www.random.com">
<button type="button" class="input-group-text bg-base"><iconify-icon icon="lucide:copy"></iconify-icon> Copy</button>
</div>
<p class="text-sm mt-1 mb-0">This is a hint text to help user.</p>
</div>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Input Sizing</h6>
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input Large</label>
<input type="text" name="#0" class="form-control form-control-lg" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Medium</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Small</label>
<input type="text" name="#0" class="form-control form-control-sm" placeholder="info@gmail.com">
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeThree" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="formCodeThree">
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input Large</label>
<input type="text" name="#0" class="form-control form-control-lg" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Medium</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Small</label>
<input type="text" name="#0" class="form-control form-control-sm" placeholder="info@gmail.com">
</div>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Input Form With Icons</h6>
<div class="row gy-3">
<div class="col-12">
<label class="form-label">First Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Last Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Email</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="col-12">
<label class="form-label">Phone</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
<div class="col-12">
<label class="form-label">Password</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-600">Submit</button>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeFour" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="formCodeFour">
<div class="row gy-3">
<div class="col-12">
<label class="form-label">First Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Last Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Email</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="col-12">
<label class="form-label">Phone</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
<div class="col-12">
<label class="form-label">Password</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-600">Submit</button>
</div>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Horizontal Input Form</h6>
<div class="mb-24">
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Phone</label>
<div class="col-sm-10">
<div class="form-mobile-field">
<select class="form-select">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<button type="submit" class="btn btn-primary-600">Submit</button>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeFive" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="formCodeFive">
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Phone</label>
<div class="col-sm-10">
<div class="form-mobile-field">
<select class="form-select">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<button type="submit" class="btn btn-primary-600">Submit</button>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Example</h6>
<form class="row gy-3 needs-validation mb-24" novalidate>
<div class="col-md-6">
<label class="form-label">First Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name" required>
<div class="invalid-feedback">
Please provide first name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name" required>
<div class="invalid-feedback">
Please provide last name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email" required>
<div class="invalid-feedback">
Please provide email address
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000" required>
<div class="invalid-feedback">
Please provide phone number
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please provide password
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Confirm Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please confirm password
</div>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-primary-600" type="submit">Submit form</button>
</div>
</form>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeSix" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="formCodeSix">
<form class="row gy-3 needs-validation" novalidate>
<div class="col-md-6">
<label class="form-label">First Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name" required>
<div class="invalid-feedback">
Please provide first name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name" required>
<div class="invalid-feedback">
Please provide last name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email" required>
<div class="invalid-feedback">
Please provide email address
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000" required>
<div class="invalid-feedback">
Please provide phone number
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please provide password
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Confirm Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please confirm password
</div>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-primary-600" type="submit">Submit form</button>
</div>
</form>
</code></pre>
</div>
<p>JavaScript</p>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#formCodeSeven" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-javascript" id="formCodeSeven">
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
</code></pre>
</div>
</div>
</div>
</div>
</main>
<!-- All library -->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<!-- main js -->
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function () {
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function (e) {
e.querySelector();
e.clearSelection();
});
clipboard.on('error', function (e) {
});
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
});
</script>
</body>
</html>