|
|
@@ -1,623 +0,0 @@
|
|
|
----
|
|
|
-import Head from "@components/_head.astro"
|
|
|
-import Footer from "@components/dashboard/_footer.astro"
|
|
|
-import Topbar from "@components/dashboard/_topbar.astro"
|
|
|
-import Sidenav from "@components/dashboard/_sidenav.astro"
|
|
|
-import Scripts from "@components/_scripts.astro"
|
|
|
-
|
|
|
-const title = "AdminLTE 4 | General Form Elements"
|
|
|
-const path = "../../../dist"
|
|
|
-const mainPage = "forms"
|
|
|
-const page = "general";
|
|
|
----
|
|
|
-
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <!--begin::Head-->
|
|
|
- <head>
|
|
|
- <Head title={title} path={path} />
|
|
|
- </head>
|
|
|
- <!--end::Head-->
|
|
|
- <!--begin::Body-->
|
|
|
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
|
- <!--begin::App Wrapper-->
|
|
|
- <div class="app-wrapper">
|
|
|
- <Topbar path={path} />
|
|
|
- <Sidenav path={path} mainPage={mainPage} page={page} />
|
|
|
- <!--begin::App Main-->
|
|
|
- <main class="app-main">
|
|
|
- <!--begin::App Content Header-->
|
|
|
- <div class="app-content-header">
|
|
|
- <!--begin::Container-->
|
|
|
- <div class="container-fluid">
|
|
|
- <!--begin::Row-->
|
|
|
- <div class="row">
|
|
|
- <div class="col-sm-6">
|
|
|
- <h3 class="mb-0">General Form</h3>
|
|
|
- </div>
|
|
|
- <div class="col-sm-6">
|
|
|
- <ol class="breadcrumb float-sm-end">
|
|
|
- <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
- <li class="breadcrumb-item active" aria-current="page">
|
|
|
- General Form
|
|
|
- </li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--end::Row-->
|
|
|
- </div>
|
|
|
- <!--end::Container-->
|
|
|
- </div>
|
|
|
- <!--end::App Content Header-->
|
|
|
- <!--begin::App Content-->
|
|
|
- <div class="app-content">
|
|
|
- <!--begin::Container-->
|
|
|
- <div class="container-fluid">
|
|
|
- <!--begin::Row-->
|
|
|
- <div class="row g-4">
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-12">
|
|
|
- <div class="callout callout-info">
|
|
|
- For detailed documentation of Form visit <a
|
|
|
- href="https://getbootstrap.com/docs/5.3/forms/overview/"
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- class="callout-link"
|
|
|
- >
|
|
|
- Bootstrap Form
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <!--begin::Quick Example-->
|
|
|
- <div class="card card-primary card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Quick Example</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Form-->
|
|
|
- <form>
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <div class="mb-3">
|
|
|
- <label for="exampleInputEmail1" class="form-label"
|
|
|
- >Email address</label
|
|
|
- >
|
|
|
- <input
|
|
|
- type="email"
|
|
|
- class="form-control"
|
|
|
- id="exampleInputEmail1"
|
|
|
- aria-describedby="emailHelp"
|
|
|
- />
|
|
|
- <div id="emailHelp" class="form-text">
|
|
|
- We'll never share your email with anyone else.
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mb-3">
|
|
|
- <label for="exampleInputPassword1" class="form-label"
|
|
|
- >Password</label
|
|
|
- >
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- class="form-control"
|
|
|
- id="exampleInputPassword1"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="input-group mb-3">
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- class="form-control"
|
|
|
- id="inputGroupFile02"
|
|
|
- />
|
|
|
- <label class="input-group-text" for="inputGroupFile02"
|
|
|
- >Upload</label
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="mb-3 form-check">
|
|
|
- <input
|
|
|
- type="checkbox"
|
|
|
- class="form-check-input"
|
|
|
- id="exampleCheck1"
|
|
|
- />
|
|
|
- <label class="form-check-label" for="exampleCheck1"
|
|
|
- >Check me out</label
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- <!--begin::Footer-->
|
|
|
- <div class="card-footer">
|
|
|
- <button type="submit" class="btn btn-primary"
|
|
|
- >Submit</button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <!--end::Footer-->
|
|
|
- </form>
|
|
|
- <!--end::Form-->
|
|
|
- </div>
|
|
|
- <!--end::Quick Example-->
|
|
|
- <!--begin::Input Group-->
|
|
|
- <div class="card card-success card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Input Group</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <div class="input-group mb-3">
|
|
|
- <span class="input-group-text" id="basic-addon1">@</span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder="Username"
|
|
|
- aria-label="Username"
|
|
|
- aria-describedby="basic-addon1"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input-group mb-3">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder="Recipient's username"
|
|
|
- aria-label="Recipient's username"
|
|
|
- aria-describedby="basic-addon2"
|
|
|
- />
|
|
|
- <span class="input-group-text" id="basic-addon2"
|
|
|
- >@example.com</span
|
|
|
- >
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="mb-3">
|
|
|
- <label for="basic-url" class="form-label"
|
|
|
- >Your vanity URL</label
|
|
|
- >
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-text" id="basic-addon3"
|
|
|
- >https://example.com/users/</span
|
|
|
- >
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- id="basic-url"
|
|
|
- aria-describedby="basic-addon3 basic-addon4"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="form-text" id="basic-addon4">
|
|
|
- Example help text goes outside the input group.
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input-group mb-3">
|
|
|
- <span class="input-group-text">$</span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- aria-label="Amount (to the nearest dollar)"
|
|
|
- />
|
|
|
- <span class="input-group-text">.00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input-group mb-3">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder="Username"
|
|
|
- aria-label="Username"
|
|
|
- />
|
|
|
- <span class="input-group-text">@</span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder="Server"
|
|
|
- aria-label="Server"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-text">With textarea</span>
|
|
|
- <textarea class="form-control" aria-label="With textarea"
|
|
|
- ></textarea>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- <!--begin::Footer-->
|
|
|
- <div class="card-footer">
|
|
|
- <button type="submit" class="btn btn-success">Submit</button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <!--end::Footer-->
|
|
|
- </div>
|
|
|
- <!--end::Input Group-->
|
|
|
- <!--begin::Horizontal Form-->
|
|
|
- <div class="card card-warning card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Horizontal Form</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Form-->
|
|
|
- <form>
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <div class="row mb-3">
|
|
|
- <label for="inputEmail3" class="col-sm-2 col-form-label"
|
|
|
- >Email</label
|
|
|
- >
|
|
|
- <div class="col-sm-10">
|
|
|
- <input
|
|
|
- type="email"
|
|
|
- class="form-control"
|
|
|
- id="inputEmail3"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row mb-3">
|
|
|
- <label
|
|
|
- for="inputPassword3"
|
|
|
- class="col-sm-2 col-form-label">Password</label
|
|
|
- >
|
|
|
- <div class="col-sm-10">
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- class="form-control"
|
|
|
- id="inputPassword3"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <fieldset class="row mb-3">
|
|
|
- <legend class="col-form-label col-sm-2 pt-0"
|
|
|
- >Radios</legend
|
|
|
- >
|
|
|
- <div class="col-sm-10">
|
|
|
- <div class="form-check">
|
|
|
- <input
|
|
|
- class="form-check-input"
|
|
|
- type="radio"
|
|
|
- name="gridRadios"
|
|
|
- id="gridRadios1"
|
|
|
- value="option1"
|
|
|
- checked
|
|
|
- />
|
|
|
- <label class="form-check-label" for="gridRadios1">
|
|
|
- First radio
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="form-check">
|
|
|
- <input
|
|
|
- class="form-check-input"
|
|
|
- type="radio"
|
|
|
- name="gridRadios"
|
|
|
- id="gridRadios2"
|
|
|
- value="option2"
|
|
|
- />
|
|
|
- <label class="form-check-label" for="gridRadios2">
|
|
|
- Second radio
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="form-check disabled">
|
|
|
- <input
|
|
|
- class="form-check-input"
|
|
|
- type="radio"
|
|
|
- name="gridRadios"
|
|
|
- id="gridRadios3"
|
|
|
- value="option3"
|
|
|
- disabled
|
|
|
- />
|
|
|
- <label class="form-check-label" for="gridRadios3">
|
|
|
- Third disabled radio
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </fieldset>
|
|
|
- <div class="row mb-3">
|
|
|
- <div class="col-sm-10 offset-sm-2">
|
|
|
- <div class="form-check">
|
|
|
- <input
|
|
|
- class="form-check-input"
|
|
|
- type="checkbox"
|
|
|
- id="gridCheck1"
|
|
|
- />
|
|
|
- <label class="form-check-label" for="gridCheck1">
|
|
|
- Example checkbox
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- <!--begin::Footer-->
|
|
|
- <div class="card-footer">
|
|
|
- <button type="submit" class="btn btn-warning"
|
|
|
- >Sign in</button
|
|
|
- >
|
|
|
- <button type="submit" class="btn float-end">Cancel</button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <!--end::Footer-->
|
|
|
- </form>
|
|
|
- <!--end::Form-->
|
|
|
- </div>
|
|
|
- <!--end::Horizontal Form-->
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <!--begin::Different Height-->
|
|
|
- <div class="card card-secondary card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Different Height</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <input
|
|
|
- class="form-control form-control-lg"
|
|
|
- type="text"
|
|
|
- placeholder=".form-control-lg"
|
|
|
- aria-label=".form-control-lg example"
|
|
|
- />
|
|
|
- <br />
|
|
|
- <input
|
|
|
- class="form-control"
|
|
|
- type="text"
|
|
|
- placeholder="Default input"
|
|
|
- aria-label="default input example"
|
|
|
- />
|
|
|
- <br />
|
|
|
- <input
|
|
|
- class="form-control form-control-sm"
|
|
|
- type="text"
|
|
|
- placeholder=".form-control-sm"
|
|
|
- aria-label=".form-control-sm example"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- </div>
|
|
|
- <!--end::Different Height-->
|
|
|
- <!--begin::Different Width-->
|
|
|
- <div class="card card-danger card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Different Width</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <!--begin::Row-->
|
|
|
- <div class="row">
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-3">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder=".col-3"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-4">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder=".col-4"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-5">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- placeholder=".col-5"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- </div>
|
|
|
- <!--end::Row-->
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- </div>
|
|
|
- <!--end::Different Width-->
|
|
|
- <!--begin::Form Validation-->
|
|
|
- <div class="card card-info card-outline mb-4">
|
|
|
- <!--begin::Header-->
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title">Form Validation</div>
|
|
|
- </div>
|
|
|
- <!--end::Header-->
|
|
|
- <!--begin::Form-->
|
|
|
- <form class="needs-validation" novalidate>
|
|
|
- <!--begin::Body-->
|
|
|
- <div class="card-body">
|
|
|
- <!--begin::Row-->
|
|
|
- <div class="row g-3">
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <div class="col-md-6">
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- <!--begin::Col-->
|
|
|
- <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>
|
|
|
- <!--end::Col-->
|
|
|
- </div>
|
|
|
- <!--end::Row-->
|
|
|
- </div>
|
|
|
- <!--end::Body-->
|
|
|
- <!--begin::Footer-->
|
|
|
- <div class="card-footer">
|
|
|
- <button class="btn btn-info" type="submit"
|
|
|
- >Submit form</button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <!--end::Footer-->
|
|
|
- </form>
|
|
|
- <!--end::Form-->
|
|
|
- <!--begin::JavaScript-->
|
|
|
- <script is:inline>
|
|
|
- // Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
|
- (() => {
|
|
|
- 'use strict';
|
|
|
-
|
|
|
- // 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>
|
|
|
- <!--end::JavaScript-->
|
|
|
- </div>
|
|
|
- <!--end::Form Validation-->
|
|
|
- </div>
|
|
|
- <!--end::Col-->
|
|
|
- </div>
|
|
|
- <!--end::Row-->
|
|
|
- </div>
|
|
|
- <!--end::Container-->
|
|
|
- </div>
|
|
|
- <!--end::App Content-->
|
|
|
- </main>
|
|
|
- <!--end::App Main-->
|
|
|
- <Footer />
|
|
|
- </div>
|
|
|
- <!--end::App Wrapper-->
|
|
|
- <!--begin::Script-->
|
|
|
- <Scripts path={path} />
|
|
|
- <!--end::Script-->
|
|
|
- </body><!--end::Body-->
|
|
|
-</html>
|
Aigars Silkalns