forms.html

{% set currentPageId = 'forms' %}{% set pageTitle = 'Forms - CastleCSS' %}{% include "inc/header.html" %}

	<!-- Main -->
	<div class="b0_12 b4_14 b4_push_01">
		<div class="p p-b3-3x">
			<section class="block">
				<h1>Forms</h1>
				<section class="block form-example">
					<h2>Basic example</h2>
					<p>This form example contains the default form elements with the recommend HTML structure.</p>

					<div class="p-2x mb-2x" style="border: 1px solid #eee">
						<form class="form">
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-radio">Male
										<input type="radio" name="radio1" checked="checked">
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-radio">Female
										<input type="radio" name="radio1">
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label for="email">Email</label>
									<input type="email"  name="Email" id="email" value="">
								</div>
								<div class="form-field" data-castlecss-field>
									<label for="password">Password</label>
									<input type="password" name="Password" id="password" value="">
								</div>
								<div class="form-field" data-castlecss-field>
									<input type="file" id="file-input">
								</div>
							</div>
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-checkbox">I want to receive the newsletter
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
						</form>
					</div>

					<pre class="brush: html">
						<form class="form">
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-radio">Male
										<input type="radio" name="radio1" checked="checked">
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-radio">Female
										<input type="radio" name="radio1">
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label for="email">Email</label>
									<input type="email" name="Email" id="email" value="">
								</div>
								<div class="form-field" data-castlecss-field>
									<label for="password">Password</label>
									<input type="password" name="Password" id="password" value="">
								</div>
								<div class="form-field" data-castlecss-field>
									<label for="file-input">Upload your file</label>
									<input type="file" id="file-input">
								</div>
							</div>
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-checkbox">I want to receive the newsletter
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
						</form>
					</pre>
				</section>

				<section class="block inputs">
					<h2>Input</h2>
					<div class="g">
						<div class="b0_12 b3_12">
							<h3>Standard input</h3>
							<p>The <code>input</code> is wrapped in a div with the class <code>.formfield</code>.
							<div class="p-2x pb-0" style="border: 1px solid #eee">
								<form class="form">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label for="label">Full name</label>
											<input type="text" name="Naam" id="label" value="">
										</div>
									</div>
								</form>
							</div>
							<pre class="brush: html">
								<form class="form">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label for="label">Full name</label>
											<input type="text" name="Naam" id="label" value="">
										</div>
									</div>
								</form>
							</pre>
						</div>
						<div class="b0_12 b3_12">
							<h3>Input with button</h3>
							<p>Wrap the <code>input</code> en <code>button</code> in a div with the class <code>.input-combined</code>
							<div class="p-2x pb-0" style="border: 1px solid #eee">
								<form class="form">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label for="search">Search</label>
											<div class="input-combined">
												<input type="search" name="search" class="form-input" id="search">
												<button	type="submit" class="btn btn-submit">Submit</button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<pre class="brush: html">
								<form class="form">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label for="search">Search</label>
											<div class="input-combined">
												<input type="search" name="search" class="form-input" id="search">
												<button	type="submit" class="btn btn-submit">Submit</button>
											</div>
										</div>
									</div>
								</form>
							</pre>
						</div>
					</div>
				</section>
				<section class="block inputs js-forms">
					<h3>Label placement</h3>
					<p>Add the classes <code>.label-above</code>, <code>.label-top</code> or <code>.label-bottom</code> to your field to adjust the position of the label. This not only works with inputs, but with textareas as well!</p>
					<div class="g">
						<div class="b0_12 b3_08">
							<h5>Moves above the input</h5>
							<form class="form">
								<ul class="form-fields label-above">
									<li class="form-field" data-castlecss-field>
										<label for="lable2a">Email</label>
										<input type="text" name="Naam" id="lable2a" value="">
									</li>
								</ul>
							</form>
						</div>
						<div class="b0_12 b3_08">
							<h5>Moves to top inside the input</h5>
							<ul class="form-fields label-top">
								<li class="form-field" data-castlecss-field>
									<label for="lable3a">Email</label>
									<input type="text" name="Naam" id="lable3a" value="">
								</li>
							</ul>
						</div>
						<div class="b0_12 b3_08">
							<h5>Moves to bottom inside the input</h5>
							<ul class="form-fields label-bottom">
								<li class="form-field" data-castlecss-field>
									<label for="lable3b">Email</label>
									<input type="text" name="Naam" id="lable3b" value="">
								</li>
							</ul>
						</div>
					</div>
				</section>
				<section class="block textareas js-forms">
					<h2>Textarea</h2>
					<div class="g">
						<div class="gi b0_12">
							<ul class="form-fields">
								<li class="form-field form-textarea" data-castlecss-field>
									<label for="textarea">Example</label>
									<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
								</li>
								<li class="form-field form-textarea label-top" data-castlecss-field>
									<label for="textarea2">Example with label-top</label>
									<textarea maxlength="30000" cols="50" rows="10" id="textarea2" name="textarea2"></textarea>
								</li>
							</ul>
							<pre class="brush: html">
							<form class="form form-horizontal">
								<ul class="form-fields">
									<li class="form-field form-textarea" data-castlecss-field>
										<label for="textarea">Example</label>
										<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
									</li>
									<li class="form-field form-textarea label-top" data-castlecss-field>
										<label for="textarea2">Example with label-top</label>
										<textarea maxlength="30000" cols="50" rows="10" id="textarea2" name="textarea2"></textarea>
									</li>
								</ul>
							</form>
						</pre>
							<div class="alert mb-2x">Remember the label placements mentioned above? The classes <code>.label-bottom</code>, <code>.label-top</code> and <code>.label-above</code> also work well with textareas. By default all labels are vertical-aligned in the middle. If you want to prevent this behaviour with textarea's you can add a parent class of <code>.input-textarea</code></div>
						</div>
					</div>
				</section>
				<section class="block checkboxes">
					<h2>Checkbox</h2>
					<h3>Standard checkbox</h3>
					<div class="g">
						<div class="b0_12">
							<b>Select your favorite fruit</b>
							<ul class="form-fields">
								<li class="form-field" data-castlecss-field>
									<label class="input-control input-checkbox">Orange
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Banana
										<input type="checkbox"  />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Apple
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Pear
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
								</li>
							</ul>
							<pre class="brush: html">
								<ul class="form-fields" >
									<li class="form-field" data-castlecss-field>
										<label class="input-control input-checkbox">Orange
											<input type="checkbox" />
											<span class="input-indicator"></span>
										</label>
										<label class="input-control input-checkbox">Banana
											<input type="checkbox"  />
											<span class="input-indicator"></span>
										</label>
										<label class="input-control input-checkbox">Apple
											<input type="checkbox" />
											<span class="input-indicator"></span>
										</label>
										<label class="input-control input-checkbox">Pear
											<input type="checkbox" />
											<span class="input-indicator"></span>
										</label>
									</li>
								</ul>
							</pre>
						</div>
						<div class="b0_12">
							<h3>Checkbox right of the label</h3>
							<p>Add the class <code>.label-left</code> to a parent of the <code>.input-checkbox</code>.</p>
							<b>Select your favorite fruit</b>
							<ul class="form-fields label-left">
								<li class="form-field" data-castlecss-field>
									<label class="input-control input-checkbox">Orange
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Banana
										<input type="checkbox"  />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Apple
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Pear
										<input type="checkbox" />
										<span class="input-indicator"></span>
									</label>
								</li>
							</ul>
						</div>
					</div>
				</section>
				<section class="block radios">
					<h2>Radio</h2>
					<div class="g">
						<div class="b0_12 b3_12">
							<h5>Vertical radios</h5>
							<form class="form">
								<div class="form-fields" >
									<div class="form-field" data-castlecss-field>
										<label class="input-control input-radio">Male
											<input type="radio" name="radio"/>
											<span class="input-indicator"></span>
										</label>
										<label class="input-control input-radio">Female
											<input type="radio" name="radio"/>
											<span class="input-indicator"></span>
										</label>
									</div>
								</div>
							</form>
							<pre class="brush: html">
								<form class="form">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label class="input-control input-radio">Male
												<input type="radio" name="radio"/>
												<span class="input-indicator"></span>
											</label>
											<label class="input-control input-radio">Female
												<input type="radio" name="radio"/>
												<span class="input-indicator"></span>
											</label>
										</div>
									</div>
								</form>
							</pre>
						</div>
						<div class="b0_12 b3_12">
							<h5>Horizontal radios</h5>
							<p>Radios can be horizontal as well. Add the class <code>.form-horizontal</code> to a parent of the field(s) you want to make horizontal, as shown in the example below.</p>
							<form class="form form-horizontal">
								<div class="form-fields">
									<div class="form-field" data-castlecss-field>
										<label for="gender" class="label"><b>Gender</b></label>
										<label class="input-control input-radio">Male
											<input type="radio" name="radio2" checked="checked"/>
											<span class="input-indicator"></span>
										</label>
										<label class="input-control input-radio">Female
											<input type="radio" name="radio2"/>
											<span class="input-indicator"></span>
										</label>
									</div>
								</div>
							</form>
							<pre class="brush: html">
								<form class="form form-horizontal">
									<div class="form-fields">
										<div class="form-field" data-castlecss-field>
											<label for="gender" class="label"><b>Gender</b></label>
											<label class="input-control input-radio">Male
												<input type="radio" name="radio2" checked="checked"/>
												<span class="input-indicator"></span>
											</label>
											<label class="input-control input-radio">Female
												<input type="radio" name="radio2"/>
												<span class="input-indicator"></span>
											</label>
										</div>
									</div>
								</form>
							</pre>
						</div>
					</div>
				</section>
				<section class="block selects">
					<h2>Select</h2>
					<form class="form">
						<div class="form-fields">
							<div class="form-field">
								<select data-castlecss-select>
									<option>First select</option>
									<option>Option</option>
									<option>Option</option>
								</select>
							</div>
						</div>
					</form>
				</section>
				<section class="block horizontal-forms js-forms">
					<h2>Inline forms</h2>
					<p>Add <code>.form-horizontal</code> to your form, field or label. The elements will be left-aligned.</p>

					<div class="block">
						<h5>Horizontal checkboxes</h5>
						<form class="form form-horizontal">
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-checkbox">Orange
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Banana
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Apple
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-checkbox">Pear
										<input type="checkbox">
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
						</form>
					</div>

					<div class="block">
						<h5>Horizontal radios</h5>
						<form class="form form-horizontal">
							<div class="form-fields">
								<div class="form-field" data-castlecss-field>
									<label class="input-control input-radio">Male
										<input type="radio" name="radio2" checked="checked"/>
										<span class="input-indicator"></span>
									</label>
									<label class="input-control input-radio">Female
										<input type="radio" name="radio2"/>
										<span class="input-indicator"></span>
									</label>
								</div>
							</div>
						</form>
					</div>

					<h5>Input with add-on and button</h5>
					<form class="form">
						<div class="form-fields label-top">
							<div class="form-field" data-castlecss-field>
								<div class="input-combined">
									<div class="input-icon fa fa-star">
										<input type="search" name="product-sku" id="product-sku" class="form-input">
										<button	type="submit" class="btn btn-submit">Search</button>
									</div>
								</div>
								<label for="product-sku">Product sku</label>
							</div>
						</div>
					</form>
					<pre class="brush: html">
						<form class="form form-horizontal">
							<div class="form-fields label-bottom">
								<div class="form-field" data-castlecss-field>
									<div class="input-combined">
										<div class="input-icon fa fa-star">
											<input type="search" name="search" class="form-input" id="search">
											<button	type="submit" class="btn btn-submit">Search</button>
										</div>
									</div>
									<label for="search">Product sku</label>
								</div>
							</div>
						</form>
					</pre>
				</section>
			</section>
		</div>
	</div>
	<!-- End main -->

{% include "inc/footer.html" %}