---
title: Forms
slug: forms
---
{% extends "layouts/components.html" %}

{% block page %}
<ol class="breadcrumb">
	<li><a href="index.html">Home</a></li>
	<li class="active">Forms</li>
</ol>
<div class="row">
	<div class="col-md-6">
		<div class="card">
			<div class="card-block">
				<h5>Basic Elements</h5>
				<form>
					<fieldset class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
						<small class="text-help">We'll never share your email with anyone else.</small>
					</fieldset>
					<fieldset class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</fieldset>
					<fieldset class="form-group">
						<label for="exampleSelect1">Example select</label>
						<select class="form-control" id="exampleSelect1">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</fieldset>
					<fieldset class="form-group">
						<label for="exampleSelect2">Example multiple select</label>
						<select multiple class="form-control" id="exampleSelect2">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</fieldset>
					<fieldset class="form-group">
						<label for="exampleTextarea">Example textarea</label>
						<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
					</fieldset>
					<fieldset class="form-group">
						<label for="exampleInputFile">File input</label>
						<input type="file" class="form-control-file" id="exampleInputFile">
						<small class="text-help">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
					</fieldset>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
							Option one is this and that&mdash;be sure to include why it's great
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
							Option two can be something else and selecting it will deselect option one
						</label>
					</div>
					<div class="radio disabled">
						<label>
							<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
							Option three is disabled
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox"> Check me out
						</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-block">
				<h4 class="margin-t-none">Input Spinner</h4>

				<p>A mobile and touch friendly input spinner component. It supports the mouse wheel
					and the up &amp; down keys.</p>
				<form action="#">
					<div class="form-group">
						<input id="touch-spin-2" data-toggle="touch-spin" data-min="-1000000" data-max="1000000" data-step="50" type="text" value="200" name="demo2" class="form-control"/>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-block">
				<h5>DatePicker</h5>
				<div class="form-group">
					<input class="datepicker form-control" type="text" value="01/28/2016"/>
				</div>
				<h5>TimePicker</h5>
				<div class="form-group">
					<div class="bootstrap-timepicker">
						<input id="timepicker3" type="text" class="form-control">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-block">
				<h5>Horizontal</h5>
				<form>
					<div class="form-group row">
						<label for="inputEmail3" class="col-sm-3 form-control-label">Email</label>
						<div class="col-sm-9">
							<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
						</div>
					</div>
					<div class="form-group row">
						<label for="inputPassword3" class="col-sm-3 form-control-label">Password</label>
						<div class="col-sm-9">
							<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3">Checkbox</label>
						<div class="col-sm-9">
							<div class="checkbox">
								<label>
									<input type="checkbox"> Check me out
								</label>
							</div>
						</div>
					</div>
					<div class="form-group row m-b-0">
						<div class="col-sm-offset-3 col-sm-9">
							<button type="submit" class="btn btn-primary">Sign in</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-block">
				<h5>Contextual colors</h5>
				<div class="form-group has-success">
					<label for="inputSuccess1">Input with success</label>
					<input type="text" class="form-control form-control-success" id="inputSuccess1">
					<small class="text-help">This is a help block message.</small>
				</div>
				<div class="form-group has-warning">
					<label for="inputWarning1">Input with warning</label>
					<input type="text" class="form-control form-control-warning" id="inputWarning1">
					<small class="text-help">This is a help block message.</small>
				</div>
				<div class="form-group has-danger">
					<label for="inputDanger1">Input with danger</label>
					<input type="text" class="form-control form-control-danger" id="inputDanger1">
					<small class="text-help">This is a help block message.</small>
				</div>

				<div class="checkbox has-success">
					<label>
						<input type="checkbox" id="checkboxSuccess" value="option1">
						Checkbox with success
					</label>
				</div>
				<div class="checkbox has-warning">
					<label>
						<input type="checkbox" id="checkboxWarning" value="option1">
						Checkbox with warning
					</label>
				</div>
				<div class="checkbox has-danger">
					<label>
						<input type="checkbox" id="checkboxDanger" value="option1">
						Checkbox with danger
					</label>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-block">
				<h5>Custom controls</h5>
				<div class="form-group">
					<label class="c-input c-checkbox">
						<input type="checkbox">
						<span class="c-indicator"></span>
						Check this custom checkbox
					</label>
				</div>
				<div class="form-group">
					<div class="c-inputs-stacked">
						<label class="c-input c-radio">
							<input id="radioStacked1" name="radio-stacked" type="radio">
							<span class="c-indicator"></span>
							Toggle this custom radio
						</label>
						<label class="c-input c-radio">
							<input id="radioStacked2" name="radio-stacked" type="radio">
							<span class="c-indicator"></span>
							Or toggle this other custom radio
						</label>
					</div>
				</div>
				<div class="form-group">
					<select class="c-select">
						<option selected>Open this select menu</option>
						<option value="1">One</option>
						<option value="2">Two</option>
						<option value="3">Three</option>
					</select>
				</div>
				<div class="form-group">
					<label class="file">
						<input type="file" id="file">
						<span class="file-custom"></span>
					</label>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="card">
	<div class="card-block">
		<h5>Summernote Wysiwyg Editor </h5>
		<textarea id="summernote"></textarea>
	</div>
</div>
{% endblock %}

{% block vendor_styling %}
	 <!-- Datepicker -->
	<link rel="stylesheet" href="examples/css/bootstrap-datepicker.min.css">

	<!-- Timepicker -->
	<link rel="stylesheet" href="examples/css/bootstrap-timepicker.min.css">
	
	<!-- Required by summernote -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">

	<!-- Summernote WYSIWYG -->
	<link rel="stylesheet" href="examples/css/summernote.min.css">

	<!-- Touchspin -->
	<link rel="stylesheet" href="examples/css/bootstrap-touchspin.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Vendor JS -->
	<script src="assets/vendor/jquery.bootstrap-touchspin.js"></script>
	<script src="assets/vendor/bootstrap-datepicker.min.js"></script>
	<script src="assets/vendor/bootstrap-timepicker.js"></script>
	<script src="assets/vendor/summernote.min.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Init -->
	<script src="examples/js/date-time.js"></script>
	<script src="examples/js/summernote.js"></script>
	<script src="examples/js/touchspin.js"></script>
{% endblock %}