mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 12:22:23 +04:00
feat: create new form layout page (#2303)
This commit is contained in:
Paweł Kuna
GitHub
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Form elements
|
||||
page-header: Form elements
|
||||
page-menu: forms
|
||||
page-menu: form.elements
|
||||
page-libs: [nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-select, imask]
|
||||
layout: default
|
||||
permalink: form-elements.html
|
||||
@@ -84,10 +84,6 @@ permalink: form-elements.html
|
||||
{% include "cards/form/layout.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
|
||||
@@ -0,0 +1,322 @@
|
||||
---
|
||||
title: Form layout
|
||||
page-header: Form Layout
|
||||
page-menu: form.layout
|
||||
layout: default
|
||||
permalink: form-layout.html
|
||||
page-libs: [litepicker]
|
||||
---
|
||||
|
||||
<div class="row row-cards row-cols-1 row-cols-md-2">
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Basic Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<input type="text" placeholder="Name" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<input type="email" placeholder="Email address" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="password" placeholder="Password" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Submit" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<label class="form-label">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input type="email" placeholder="Enter email address" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Select Subject
|
||||
</label>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
Option 1
|
||||
</option>
|
||||
<option>
|
||||
Option 2
|
||||
</option>
|
||||
<option>
|
||||
Option 3
|
||||
</option>
|
||||
<option>
|
||||
Option 4
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Message
|
||||
</label>
|
||||
<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form with Icons
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="user" placeholder="Username" prepend %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="mail" placeholder="Email address" prepend type="mail" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="lock" placeholder="Password" prepend type="password" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="lock" placeholder="Confirm Password" prepend type="password" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<h4>
|
||||
Personal Info
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Gender
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
Male
|
||||
</option>
|
||||
<option>
|
||||
Female
|
||||
</option>
|
||||
<option>
|
||||
Others
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Date of Birth
|
||||
</label>
|
||||
|
||||
<div>
|
||||
{% include "ui/datepicker.html" layout="icon" id="birth-date" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Category
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
Category 1
|
||||
</option>
|
||||
<option>
|
||||
Category 2
|
||||
</option>
|
||||
<option>
|
||||
Category 3
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>
|
||||
Address
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Street
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">
|
||||
City
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
State
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Post Code
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Country
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
--Select Country--
|
||||
</option>
|
||||
{% for country in flags %}
|
||||
<option>
|
||||
{{ country.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Membership
|
||||
</label>
|
||||
|
||||
<div class="d-flex flex-row gap-4">
|
||||
{% include "ui/form/check.html" title="Free" type="radio" name="membership" checked=true %}
|
||||
{% include "ui/form/check.html" title="Paid" type="radio" name="membership" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end">
|
||||
{% include "ui/button.html" text="Cancel" %}
|
||||
{% include "ui/button.html" color="primary" text="Save Changes" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user