first init
This commit is contained in:
arifal
377
resources/views/forms/basic.blade.php
Executable file
377
resources/views/forms/basic.blade.php
Executable file
@@ -0,0 +1,377 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Form Basics'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Basics'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic Example</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="simpleinput" class="form-label">Text</label>
|
||||
<input type="text" id="simpleinput" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-email" class="form-label">Email</label>
|
||||
<input type="email" id="example-email" name="example-email" class="form-control"
|
||||
placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-password" class="form-label">Password</label>
|
||||
<input type="password" id="example-password" class="form-control" value="password">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-palaceholder" class="form-label">Placeholder</label>
|
||||
<input type="text" id="example-palaceholder" class="form-control"
|
||||
placeholder="placeholder">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-textarea" class="form-label">Text
|
||||
area</label>
|
||||
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Input Sizing</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"
|
||||
aria-label=".form-control-lg example">
|
||||
<input class="form-control" type="text" placeholder="Default input"
|
||||
aria-label="default input example">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"
|
||||
aria-label=".form-control-sm example">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Disabled Input</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control" type="text" placeholder="Disabled input"
|
||||
aria-label="Disabled input example" disabled>
|
||||
<input class="form-control" type="text" value="Disabled readonly input"
|
||||
aria-label="Disabled input example" disabled readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Checkbox</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5>Default</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck1">
|
||||
<label class="form-check-label" for="customCheck1">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck2">
|
||||
<label class="form-check-label" for="customCheck2">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck3">
|
||||
<label class="form-check-label" for="customCheck3">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck4">
|
||||
<label class="form-check-label" for="customCheck4">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Colors-->
|
||||
<h5>Colors</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor1" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor1">Default
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-success mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor2" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor2">Success
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-info mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor3" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor3">Info
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-secondary mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor6" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor6">Secondary
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-warning mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor4" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor4">Warning
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-danger mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor5" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor5">Danger
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-dark">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor7" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor7">Dark
|
||||
Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Readonly Input</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control" type="text" value="Readonly input here..."
|
||||
aria-label="readonly input example" readonly>
|
||||
<input type="text" readonly class="form-control-plaintext" id="staticEmail"
|
||||
value="email@example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Datalists input</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDataList" class="form-label">Datalist
|
||||
example</label>
|
||||
<input class="form-control" list="datalistOptions" id="exampleDataList"
|
||||
placeholder="Type to search...">
|
||||
<datalist id="datalistOptions">
|
||||
<option value="San Francisco">
|
||||
<option value="New York">
|
||||
<option value="Seattle">
|
||||
<option value="Los Angeles">
|
||||
<option value="Chicago">
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Select</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
<label for="example-select" class="form-label">Default Input
|
||||
Select</label>
|
||||
<select class="form-select" id="example-select">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">The <code>multiple</code> attribute is also
|
||||
supported:</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-multiselect" class="form-label">Multiple
|
||||
Select</label>
|
||||
<select id="example-multiselect" multiple="" class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As is the <code>size</code> attribute:</p>
|
||||
|
||||
<label for="example-multiselectsize" class="form-label">Multiple Select
|
||||
Size</label>
|
||||
<select id="example-multiselectsize" class="form-select" size="3"
|
||||
aria-label="size 3 select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Radio</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5>Default</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault"
|
||||
id="flexRadioDefault1">
|
||||
<label class="form-check-label" for="flexRadioDefault1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault"
|
||||
id="flexRadioDefault2" checked="">
|
||||
<label class="form-check-label" for="flexRadioDefault2">
|
||||
Default checked radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
|
||||
value="option1">
|
||||
<label class="form-check-label" for="inlineRadio1">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
|
||||
value="option2">
|
||||
<label class="form-check-label" for="inlineRadio2">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Colors</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" id="customRadiocolor1" name="customRadiocolor1"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor1">Default
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-success mb-2">
|
||||
<input type="radio" id="customRadiocolor2" name="customRadiocolor2"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor2">Success
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-info mb-2">
|
||||
<input type="radio" id="customRadiocolor3" name="customRadiocolor3"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor3">Info
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-secondary mb-2">
|
||||
<input type="radio" id="customRadiocolor6" name="customRadiocolor6"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor6">Secondary
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-warning mb-2">
|
||||
<input type="radio" id="customRadiocolor4" name="customRadiocolor4"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor4">Warning
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-danger mb-2">
|
||||
<input type="radio" id="customRadiocolor5" name="customRadiocolor5"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor5">Danger
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-dark">
|
||||
<input type="radio" id="customRadiocolor7" name="customRadiocolor7"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor7">Dark
|
||||
Radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Switch</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">Default
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
|
||||
checked="">
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled"
|
||||
disabled="">
|
||||
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch"
|
||||
id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
|
||||
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
|
||||
checkbox input</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
67
resources/views/forms/editors.blade.php
Executable file
67
resources/views/forms/editors.blade.php
Executable file
@@ -0,0 +1,67 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Editors'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/quill/dist/quill.snow.css','node_modules/quill/dist/quill.bubble.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Editors'])
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Snow Editor</h5>
|
||||
|
||||
<p class="card-subtitle">Use <code>snow-editor</code> id to set snow editor.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div id="snow-editor" style="height: 300px;">
|
||||
<h3><span class="ql-size-large">Hello World!</span></h3>
|
||||
<p><br></p>
|
||||
<h3>This is a simple editable area.</h3>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>Select a text to reveal the toolbar.</li>
|
||||
<li>Edit rich document on-the-fly, so elastic!</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>End of simple area</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Bubble Editor</h5>
|
||||
|
||||
<p class="card-subtitle">Use <code>bubble-editor</code> id to set bubble editor.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<!-- Bubble Editors -->
|
||||
<div id="bubble-editor" style="height: 300px;">
|
||||
<h3><span class="ql-size-large">Hello World!</span></h3>
|
||||
<p><br></p>
|
||||
<h3>This is a simple editable area.</h3>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>Select a text to reveal the toolbar.</li>
|
||||
<li>Edit rich document on-the-fly, so elastic!</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>End of simple area</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<!-- End Container Fluid -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-quilljs.js'])
|
||||
@endsection
|
||||
73
resources/views/forms/fileuploads.blade.php
Executable file
73
resources/views/forms/fileuploads.blade.php
Executable file
@@ -0,0 +1,73 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'File Uploads'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'File Uploads'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Dropzone File Upload</h5>
|
||||
<p class="card-subtitle">DropzoneJS is an open source library that provides
|
||||
drag’n’drop file uploads
|
||||
with image previews.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="dropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="multiple">
|
||||
</div>
|
||||
<div class="dz-message needsclick">
|
||||
<i class="h1 bx bx-cloud-upload"></i>
|
||||
<h3>Drop files here or click to upload.</h3>
|
||||
<span class="text-muted fs-13">
|
||||
(This is just a demo dropzone. Selected files are
|
||||
<strong>not</strong> actually uploaded.)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<!-- This is used as the file preview template -->
|
||||
<div class="border rounded">
|
||||
<div class="d-flex align-items-center p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
|
||||
alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name>
|
||||
</h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-fileupload.js'])
|
||||
@endsection
|
||||
184
resources/views/forms/flatpicker.blade.php
Executable file
184
resources/views/forms/flatpicker.blade.php
Executable file
@@ -0,0 +1,184 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Flatpicker'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/flatpickr/dist/flatpickr.min.css', 'node_modules/flatpickr/dist/themes/dark.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Flatpicker'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">DateTime</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Human-friendly Dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">MinDate and MaxDate</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Disabling dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="disable-datepicker" class="form-control" placeholder="Disabling dates">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Selecting multiple dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Selecting multiple dates - Conjunction</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="conjunction-datepicker" class="form-control"
|
||||
placeholder="2018-10-10 :: 2018-10-11">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Range Calendar</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="range-datepicker" class="form-control"
|
||||
placeholder="2018-10-03 to 2018-10-10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic Timepicker</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="basic-timepicker" class="form-control" placeholder="Basic timepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">24-hour Time Picker</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="24hours-timepicker" class="form-control" placeholder="16:21">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Time Picker w/ Limits</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="minmax-timepicker" class="form-control" placeholder="Limits">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Preloading Time</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="preloading-timepicker" class="form-control" placeholder="Pick a time">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Inline Calendar</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-flatepicker.js'])
|
||||
@endsection
|
||||
383
resources/views/forms/validation.blade.php
Executable file
383
resources/views/forms/validation.blade.php
Executable file
@@ -0,0 +1,383 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Form Validation'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Validation'])
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Browser Default
|
||||
</h5>
|
||||
<p class="card-subtitle">Depending on your browser and OS, you’ll see a slightly different style
|
||||
of
|
||||
feedback.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb-3">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefaultUsername" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
<input type="text" class="form-control" id="validationDefaultUsername"
|
||||
aria-describedby="inputGroupPrepend2" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationDefault03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" required>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationDefault04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
|
||||
<label class="form-check-label" for="invalidCheck2">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom styles
|
||||
</h5>
|
||||
<p class="card-subtitle">For custom Bootstrap form validation messages, you’ll need to add the
|
||||
<code>novalidate</code> boolean attribute to your <code><form></code>. This disables
|
||||
the browser default feedback tooltips, but still provides access to the form validation APIs
|
||||
in JavaScript. When attempting to submit, you’ll see the <code>:invalid</code> and
|
||||
<code>:valid</code> styles applied to your form controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustomUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationCustomUsername"
|
||||
aria-describedby="inputGroupPrepend" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationCustom04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Server side
|
||||
</h5>
|
||||
<p class="card-subtitle">We recommend using client-side validation, but in case you require
|
||||
server-side validation, you can indicate invalid and valid form fields with
|
||||
<code>.is-invalid</code> and <code>.is-valid</code>. Note that
|
||||
<code>.invalid-feedback</code> is also supported with these classes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark"
|
||||
required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto"
|
||||
required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServerUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername"
|
||||
aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
|
||||
<div id="validationServerUsernameFeedback" class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationServer03" class="form-label">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03"
|
||||
aria-describedby="validationServer03Feedback" required>
|
||||
<div id="validationServer03Feedback" class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer04" class="form-label">State</label>
|
||||
<select class="form-select is-invalid" id="validationServer04"
|
||||
aria-describedby="validationServer04Feedback" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div id="validationServer04Feedback" class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05"
|
||||
aria-describedby="validationServer05Feedback" required>
|
||||
<div id="validationServer05Feedback" class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3"
|
||||
aria-describedby="invalidCheck3Feedback" required>
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div id="invalidCheck3Feedback" class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Supported elements
|
||||
</h5>
|
||||
<p class="card-subtitle">Validation styles are available for the following form controls and
|
||||
components:</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code><input></code>s and <code><textarea></code>s with
|
||||
<code>.form-control</code> (including up to one <code>.form-control</code> in input
|
||||
groups)
|
||||
</li>
|
||||
<li><code><select></code>s with <code>.form-select</code></li>
|
||||
<li><code>.form-check</code>s</li>
|
||||
</ul>
|
||||
<div class="mb-3">
|
||||
<form class="was-validated">
|
||||
<div class="mb-3">
|
||||
<label for="validationTextarea" class="form-label">Textarea</label>
|
||||
<textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a message in the textarea.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
|
||||
<label class="form-check-label" for="validationFormCheck1">Check this
|
||||
checkbox</label>
|
||||
<div class="invalid-feedback">Example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked"
|
||||
required>
|
||||
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked"
|
||||
required>
|
||||
<label class="form-check-label" for="validationFormCheck3">Or toggle this other
|
||||
radio</label>
|
||||
<div class="invalid-feedback">More example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<select class="form-select" required aria-label="select example">
|
||||
<option value="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Example invalid select feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<input type="file" class="form-control" aria-label="file example" required>
|
||||
<div class="invalid-feedback">Example invalid form file feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tooltips
|
||||
</h5>
|
||||
<p class="card-subtitle">If your form layout allows it, you can swap the
|
||||
<code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code>
|
||||
classes to display validation feedback in a styled tooltip. Be sure to have a parent with
|
||||
<code>position: relative</code> on it for tooltip positioning. In the example below, our
|
||||
column classes have this already, but your project may require an alternative setup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltipUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername"
|
||||
aria-describedby="validationTooltipUsernamePrepend" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 position-relative">
|
||||
<label for="validationTooltip03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationTooltip04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-tooltip">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user