| Server IP : 138.197.107.151 / Your IP : 216.73.217.7 Web Server : Apache/2.4.58 (Ubuntu) System : Linux BloxBy-Builder 6.8.0-71-generic #71-Ubuntu SMP PREEMPT_DYNAMIC Tue Jul 22 16:52:38 UTC 2025 x86_64 User : wpbetasites_mrakzqskir ( 1022) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/silversharkdev/public/skote_html-main/ajax/ |
Upload File : |
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0 font-size-18">Form Layouts</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
<li class="breadcrumb-item active">Form Layouts</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Form Grid Layout</h4>
<form>
<div class="mb-3">
<label for="formrow-firstname-input" class="form-label">First Name</label>
<input type="text" class="form-control" id="formrow-firstname-input" placeholder="Enter Your First Name">
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="formrow-email-input" class="form-label">Email</label>
<input type="email" class="form-control" id="formrow-email-input" placeholder="Enter Your Email ID">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="formrow-password-input" class="form-label">Password</label>
<input type="password" class="form-control" id="formrow-password-input" placeholder="Enter Your Password">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label for="formrow-inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="formrow-inputCity" placeholder="Enter Your Living City">
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label for="formrow-inputState" class="form-label">State</label>
<select id="formrow-inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label for="formrow-inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="formrow-inputZip" placeholder="Enter Your Zip Code">
</div>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary w-md">Submit</button>
</div>
</form>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Horizontal Form Layout</h4>
<form>
<div class="row mb-4">
<label for="horizontal-firstname-input" class="col-sm-3 col-form-label">First name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="horizontal-firstname-input" placeholder="Enter Your ">
</div>
</div>
<div class="row mb-4">
<label for="horizontal-email-input" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="horizontal-email-input" placeholder="Enter Your Email ID">
</div>
</div>
<div class="row mb-4">
<label for="horizontal-password-input" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="horizontal-password-input" placeholder="Enter Your Password">
</div>
</div>
<div class="row justify-content-end">
<div class="col-sm-9">
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="horizontalLayout-Check">
<label class="form-check-label" for="horizontalLayout-Check">
Remember me
</label>
</div>
<div>
<button type="submit" class="btn btn-primary w-md">Submit</button>
</div>
</div>
</div>
</form>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title mb-4">Auto Sizing</h5>
<form class="row gy-2 gx-3 align-items-center">
<div class="col-sm-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-sm-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-sm-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-sm-auto">
<button type="submit" class="btn btn-primary w-md">Submit</button>
</div>
</form>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title mb-4">Inline forms</h5>
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary w-md">Submit</button>
</div>
</form>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Floating labels</h5>
<p class="card-title-desc">Create beautifully simple form labels that float over your input fields.</p>
<form>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingnameInput" placeholder="Enter Name">
<label for="floatingnameInput">Name</label>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingemailInput" placeholder="Enter Email address">
<label for="floatingemailInput">Email address</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label 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>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="floatingCheck">
<label class="form-check-label" for="floatingCheck">
Check me out
</label>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary w-md">Submit</button>
</div>
</form>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title mb-4">Inline Forms With Hstack</h5>
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Add your item here..."
aria-label="Add your item here...">
<button type="button" class="btn btn-secondary">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Reset</button>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div>
<!-- End Page-content -->