261 lines
13 KiB
HTML
261 lines
13 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %} Forms {% endblock title %}
|
|
|
|
<!-- Specific CSS goes HERE -->
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ### $App Screen Content ### -->
|
|
<main class='main-content bgc-grey-100'>
|
|
<div id='mainContent'>
|
|
<div class="row gap-20 masonry pos-r">
|
|
<div class="masonry-sizer col-md-6"></div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Basic Form</h6>
|
|
<div class="mT-30">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
|
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
|
|
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
|
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
|
|
<span class="peer peer-greed">Call John for Dinner</span>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-color">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Complex Form Layout</h6>
|
|
<div class="mT-30">
|
|
<form>
|
|
<div class="row">
|
|
<div class="mb-3 col-md-6">
|
|
<label class="form-label" for="inputEmail4">Email</label>
|
|
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
|
|
</div>
|
|
<div class="mb-3 col-md-6">
|
|
<label class="form-label" for="inputPassword4">Password</label>
|
|
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="inputAddress">Address</label>
|
|
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="inputAddress2">Address 2</label>
|
|
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
|
</div>
|
|
<div class="row">
|
|
<div class="mb-3 col-md-6">
|
|
<label class="form-label" for="inputCity">City</label>
|
|
<input type="text" class="form-control" id="inputCity">
|
|
</div>
|
|
<div class="mb-3 col-md-4">
|
|
<label class="form-label" for="inputState">State</label>
|
|
<select id="inputState" class="form-control">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 col-md-2">
|
|
<label class="form-label" for="inputZip">Zip</label>
|
|
<input type="text" class="form-control" id="inputZip">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="mb-3 col-md-6">
|
|
<label class="form-label fw-500">Birthdate</label>
|
|
<div class="timepicker-input input-icon mb-3">
|
|
<div class="input-group">
|
|
<div class="input-group-text bgc-white bd bdwR-0">
|
|
<i class="ti-calendar"></i>
|
|
</div>
|
|
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
|
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
|
|
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
|
|
<span class="peer peer-greed">Call John for Dinner</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Horizontal Form</h6>
|
|
<div class="mT-30">
|
|
<form>
|
|
<div class="mb-3 row">
|
|
<label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<div class="row">
|
|
<legend class="col-form-legend col-sm-2">Radios</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<label class="form-label form-check-label">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
|
Option one is this and that—be sure to include why it's great
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-label form-check-label">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
|
Option two can be something else and selecting it will deselect option one
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled">
|
|
<label class="form-label form-check-label">
|
|
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
|
Option three is disabled
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3 row">
|
|
<div class="col-sm-2">Checkbox</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<label class="form-label form-check-label">
|
|
<input class="form-check-input" type="checkbox"> Check me out
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<div class="col-sm-10">
|
|
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Disabled Forms</h6>
|
|
<div class="mT-30">
|
|
<form>
|
|
<fieldset disabled>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="disabledTextInput">Disabled input</label>
|
|
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="disabledSelect">Disabled select menu</label>
|
|
<select id="disabledSelect" class="form-control">
|
|
<option>Disabled select</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-label" class="form-check-label">
|
|
<input class="form-check-input" type="checkbox"> Can't check this
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-color">Submit</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Validation</h6>
|
|
<div class="mT-30">
|
|
<form class="container" id="needs-validation" novalidate>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" for="validationCustom01">First name</label>
|
|
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" for="validationCustom02">Last name</label>
|
|
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" for="validationCustom03">City</label>
|
|
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid city.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label class="form-label" for="validationCustom04">State</label>
|
|
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid state.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label class="form-label" for="validationCustom05">Zip</label>
|
|
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid zip.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary btn-color" type="submit">Submit form</button>
|
|
</form>
|
|
<script>
|
|
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
(function() {
|
|
'use strict';
|
|
|
|
window.addEventListener('load', function() {
|
|
var form = document.getElementById('needs-validation');
|
|
form.addEventListener('submit', function(event) {
|
|
if (form.checkValidity() === false) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
}, false);
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock content %}
|
|
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}{% endblock javascripts %} |