Forms

Forms have this basic structure:

<form>
	<div class="input-group">
		<label />
		<!-- optional inline stuff -->
		<input />
		<p class="input-note">Some optional info</p>
	</div>

	<!-- more input groups -->

	<div class="submit-area">
		<button />
		<!-- or more buttons in buttons row -->
	</div>
</form>

Forms don’t actually have to be inside form tag, but they have to be wrapped in tag with proper class - vertical-form or horizontal-form.

Input group

Input group .input-group serves as a wrapper for label - input pair. There is space for additional inline content, like icons between label and input. Or you can put some information into p.input-note after the input itself. You can also mark whole inpud as valid .valid or invalid .invalid depending on what user puts in.

Lorem ipsum.

Note for input with invalid value. 

<div class="input-group">
	<label for="input">Input label</label>
	<input type="text" id="input" />
</div>

<div class="input-group">
	<label for="input-w-note">Input label</label>
	<input type="text" id="input-w-note" />
	<p class="input-note">
		Lorem ipsum.
	</p>
</div>

<div class="input-group valid">
	<label for="input-valid">Input label</label>
	<input type="text" id="input-valid" />
</div>

<div class="input-group invalid">
	<label for="input-invalid">Input label</label>
	<input type="text" id="input-invalid" />
	<p class="input-note">
		Note for input with invalid value.
	</p>
</div>

Submit area

Submit area .submit-area serves as a wrapper for submit button. If you include back/cancel button, it should be on a separate line and as pronnounced as submit button, .button.text would do for that. Should you need more submit buttons, wrap them in .buttons-row and consider making only one of them primary and rest of them secondary .button.secondary.

Back 
<div class="submit-area">
	<div class="buttons-row">
		<input type="button" class="secondary" value="Secondary submit" />
		<input type="submit" value="Primary submit" />
	</div>
	<a class="button text">Back</a>
</div>

Vertical vs horizontal form.

Horizontal forms have all their inputs in single row (at least until responsivity kicks in). They’re used mostly for filters and may even lack submit button (submit via JS on change). Vertical forms are used for everything else.

Horizontal form

Input groups in horizontal form should have set width. You can do it your way, or use one of our utility classes.

<form class="horizontal-form">
	<div class="input-group w200x">
		<label for="hor-form-search">Search</label>
		<input type="text" id="hor-form-search">
	</div>
	<div class="input-group w200x">
		<label for="hor-form-type">Filter</label>
		<select placeholder="Filtrovat typ" id="hor-form-type">
			<option value="">&lt;don't filter&gt;</option>
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
		</select>
	</div>
	<div class="input-group">
		<label>
			<input type="checkbox"> Only active
		</label>
	</div>
</form>

Vertical form

Prefered form layout, one input per line in single 640px wide centered column with centered submit button at the end. There is also .wide variant which is 960px wide, should you really need it. Vertical forms should be wrapped inside .white-block.

Back 
<div class="white-block">
	<form class="vertical-form">
		<div class="input-group">
			<label for="ver-form-name">Name</label>
			<input type="text" id="ver-form-name">
		</div>
		<div class="input-group">
			<label for="ver-form-type">Type</label>
			<select placeholder="Filtrovat typ" id="ver-form-type">
				<option>Super</option>
				<option>Better</option>
				<option>Excellent</option>
			</select>
		</div>
		<div class="input-group">
			<label>
				<input type="checkbox"> Make it even better
			</label>
		</div>
		<div class="submit-area">
			<input type="submit" value="Submit" />
			<a class="button text">Back</a>
		</div>
	</form>
</div>