---
title: Form elements
page-header: Form elements
menu: forms
libs: nouislider, autosize, selectize, flatpickr, tabler-flags, tabler-payments
---

<div class="row row-cards">
	<div class="col-12">
		<form action="https://httpbin.org/post" method="post" class="card">
			<div class="card-header">
				<h4 class="card-title">Form elements</h4>
			</div>
			<div class="card-body">
				<div class="row">
					<div class="col-xl-4">
						<div class="row">
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
						</div>
					</div>
					<div class="col-xl-4">
						<div class="row">
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
						</div>
					</div>
					<div class="col-xl-4">
						<div class="row">
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
							<div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card-footer text-end">
				<div class="d-flex">
					<a href="#" class="btn btn-link">Cancel</a>
					<button type="submit" class="btn btn-primary ms-auto">Send data</button>
				</div>
			</div>
		</form>
	</div>

	<div class="col-md-6">
		{% include cards/form/layout.html %}
	</div>

	<div class="col-md-6">
		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
	</div>
</div>