Forms
The Core style set lets you easily construct forms that follow the standard form layout and design.
Note: This documentation assumes that you have an understanding of how HTML forms work. It will not go into detail
as to how forms are constructed, but rather explain the specifics of the Core-related form styles.
Form Wrapper
Form Themes
Standard Form Theme
White Form Theme
Form Structure
Form Elements
Text Inputs
Select Fields
Input Sizes
Radio Buttons
Checkboxes
Submit Buttons
Cancel Link
Errors
Labels for Required Inputs
Status Messages
HTML5 Validation
Form Wrapper
If you want to build a standard form, you will need to apply the class form
to your form element.
Form wrapper
<form action = "#" class = "form" ></form> <form action="#" class="form"></form>
Form Themes
There are different themes available for your forms. They are applied with a form-theme-*
class
on the form element.
With no specific theme defined, your form will have a transparent background. Adding a theme will
give your form a colored background and apply certain other visual effects, like separators between
fieldsets, paddings, rounded corners, etc.
Form themes will only alter the appearance of the form wrapper and its fieldsets. Everything else is up to the developer.
Standard Form Theme
This is the standard form theme for forms on light backgrounds.
Form with standard theme
<form action = "#" class = "form form-theme-standard" >
<h4> Standard Form </h4>
<fieldset>
<input type = "text" class = "input-text" />
</fieldset>
<fieldset>
<input type = "submit" class = "button" value = "Submit" />
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<h4>Standard Form</h4>
<fieldset>
<input type="text" class="input-text" />
</fieldset>
<fieldset>
<input type="submit" class="button" value="Submit" />
</fieldset>
</form>
White Form Theme
The white form theme is for forms that are set on dark backgrounds.
Form with white theme
(Background added for demonstrational purposes.)
<form action = "#" class = "form form-theme-white" >
<h4> White Form </h4>
<fieldset>
<input type = "text" class = "input-text" />
</fieldset>
<fieldset>
<input type = "submit" class = "button-primary" value = "Submit" />
</fieldset>
</form> <form action="#" class="form form-theme-white">
<h4>White Form</h4>
<fieldset>
<input type="text" class="input-text" />
</fieldset>
<fieldset>
<input type="submit" class="button-primary" value="Submit" />
</fieldset>
</form>
Form Structure
Forms are structured using the grid layout described in the Grid section.
All inputs are 100% wide in the standard form
layout. You can adjust their sizes
through the grid items that they are wrapped in.
Basic form using the grid layout
<form action = "#" class = "form form-theme-standard" >
<h3> Demo Form </h3>
<fieldset>
<div class = "grid gutter-s" >
<div class = "grid-item one-fourth" >
<label for = "input1" > Label 1 </label>
</div>
<div class = "grid-item one-third" >
<select id = "input1" class = "select" >
<option> Option </option>
<option> Awption </option>
</select>
</div>
</div>
<div class = "grid gutter-s" >
<div class = "grid-item one-fourth" >
<label for = "input2" > Label 2 </label>
</div>
<div class = "grid-item three-fourths" >
<input type = "text" id = "input2" class = "input-text" />
</div>
</div>
<div class = "grid gutter-s" >
<div class = "grid-item one-fourth" >
<label for = "input3" > Label 3 </label>
</div>
<div class = "grid-item three-fourths" >
<input type = "text" id = "input3" class = "input-text" />
</div>
</div>
<div class = "grid gutter-horizontal-s" >
<div class = "grid-item three-fourths push-one-fourth" >
<ul>
<li>
<input type = "checkbox" id = "input4" />
<label for = "input4" > Label 4 </label>
</li>
<li>
<input type = "checkbox" id = "input5" />
<label for = "input5" > Label 5 </label>
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset>
<div class = "grid gutter-s" >
<div class = "grid-item one-fourth" >
<label for = "input6" > Lbl 6 </label>
/
<label for = "input7" > Lbl 7 </label>
</div>
<div class = "grid-item one-eighth" >
<input type = "text" id = "input6" class = "input-text" />
</div>
<div class = "grid-item five-eighths" >
<input type = "text" id = "input7" class = "input-text" />
</div>
</div>
<div class = "grid gutter-s" >
<div class = "grid-item one-fourth" >
<label for = "input8" > Lbl 8 </label>
/
<label for = "input9" > Lbl 9 </label>
</div>
<div class = "grid-item five-eighths" >
<input type = "text" id = "input8" class = "input-text" />
</div>
<div class = "grid-item one-eighth" >
<input type = "text" id = "input9" class = "input-text" />
</div>
</div>
</fieldset>
<fieldset>
<input type = "submit" class = "button float-right" value = "Submit" />
<a href = "#" class = "cancel" > Back </a>
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<h3>Demo Form</h3>
<fieldset>
<div class="grid gutter-s">
<div class="grid-item one-fourth">
<label for="input1">Label 1</label>
</div>
<div class="grid-item one-third">
<select id="input1" class="select">
<option>Option</option>
<option>Awption</option>
</select>
</div>
</div>
<div class="grid gutter-s">
<div class="grid-item one-fourth">
<label for="input2">Label 2</label>
</div>
<div class="grid-item three-fourths">
<input type="text" id="input2" class="input-text" />
</div>
</div>
<div class="grid gutter-s">
<div class="grid-item one-fourth">
<label for="input3">Label 3</label>
</div>
<div class="grid-item three-fourths">
<input type="text" id="input3" class="input-text" />
</div>
</div>
<div class="grid gutter-horizontal-s">
<div class="grid-item three-fourths push-one-fourth">
<ul>
<li>
<input type="checkbox" id="input4" />
<label for="input4">Label 4</label>
</li>
<li>
<input type="checkbox" id="input5" />
<label for="input5">Label 5</label>
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset>
<div class="grid gutter-s">
<div class="grid-item one-fourth">
<label for="input6">Lbl 6</label>
/
<label for="input7">Lbl 7</label>
</div>
<div class="grid-item one-eighth">
<input type="text" id="input6" class="input-text" />
</div>
<div class="grid-item five-eighths">
<input type="text" id="input7" class="input-text" />
</div>
</div>
<div class="grid gutter-s">
<div class="grid-item one-fourth">
<label for="input8">Lbl 8</label>
/
<label for="input9">Lbl 9</label>
</div>
<div class="grid-item five-eighths">
<input type="text" id="input8" class="input-text" />
</div>
<div class="grid-item one-eighth">
<input type="text" id="input9" class="input-text" />
</div>
</div>
</fieldset>
<fieldset>
<input type="submit" class="button float-right" value="Submit" />
<a href="#" class="cancel">Back</a>
</fieldset>
</form>
Form Elements
There are standard definitions for all common form elements. The sections below will show examples of each.
Text Inputs
All text inputs, including type="email"
, type="tel"
, etc., get the class input-text
.
Text inputs
<input type = "text" class = "input-text" /> <input type="text" class="input-text" />
<input type = "email" class = "input-text" /> <input type="email" class="input-text" />
You can attach unit icons to your text inputs to give the user an additional hint about what is asked of him.
To apply a unit icon, give your text input the additional class input-unit
and insert a
FontAwesome icon after it with the class unit-icon
.
Text input with icon
<input type = "text" class = "input-text input-unit" /><span class = "unit-icon fa fa-euro" ></span> <input type="text" class="input-text input-unit" /><span class="unit-icon fa fa-euro"></span>
Please note that any whitespace between the input and the text (such as line breaks) will cause the
icon to be positioned a bit more to the right.
Input Sizes
You can adjust the size of your form inputs by applying the
font size classes to them.
Differently sized form inputs
<input type = "text" class = "input-text font-xs one-third" placeholder = "Quite" />
<select class = "select font-xs one-third" ><option> Tiny </option></select> <input type="text" class="input-text font-xs one-third" placeholder="Quite" />
<select class="select font-xs one-third"><option>Tiny</option></select>
<input type = "text" class = "input-text font-l one-third" placeholder = "Pretty" />
<select class = "select font-l one-third" ><option> Big </option></select> <input type="text" class="input-text font-l one-third" placeholder="Pretty" />
<select class="select font-l one-third"><option>Big</option></select>
Select Fields
Select fields get the class select
.
Select fields
<select class = "select" >
<optgroup label = "Fruit" >
<option> Apples </option>
<option> Bananas </option>
<option> Carrots </option>
</optgroup>
<optgroup label = "Vegetables!" >
<option> Potatoes </option>
<option> Radishes </option>
</optgroup>
</select> <select class="select">
<optgroup label="Fruit">
<option>Apples</option>
<option>Bananas</option>
<option>Carrots</option>
</optgroup>
<optgroup label="Vegetables!">
<option>Potatoes</option>
<option>Radishes</option>
</optgroup>
</select>
Apples
Bananas
Carrots
Potatoes
Radishes
Radio Buttons
For radio buttons, the input gets the class input-radio
and the label gets the class
label-radio
.
Radio buttons
<ul>
<li>
<input type = "radio" class = "input-radio" id = "apple" name = "fruit" checked />
<label for = "apple" class = "label-radio" > Apple </label>
</li>
<li>
<input type = "radio" class = "input-radio" id = "banana" name = "fruit" />
<label for = "banana" class = "label-radio" > Banana </label>
</li>
</ul> <ul>
<li>
<input type="radio" class="input-radio" id="apple" name="fruit" checked />
<label for="apple" class="label-radio">Apple</label>
</li>
<li>
<input type="radio" class="input-radio" id="banana" name="fruit" />
<label for="banana" class="label-radio">Banana</label>
</li>
</ul>
Checkboxes
For checkboxes, the input gets the class input-checkbox
and the label gets the class
label-checkbox
.
Checkboxes
<ul>
<li>
<input type = "checkbox" class = "input-checkbox" id = "pears" checked />
<label for = "pears" class = "label-radio" > Pears </label>
</li>
<li>
<input type = "checkbox" class = "input-checkbox" id = "cheese" />
<label for = "cheese" class = "label-radio" > Cheese </label>
</li>
<li>
<input type = "checkbox" class = "input-checkbox" id = "car-battery" />
<label for = "car-battery" class = "label-radio" > Car battery </label>
</li>
</ul> <ul>
<li>
<input type="checkbox" class="input-checkbox" id="pears" checked />
<label for="pears" class="label-radio">Pears</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="cheese" />
<label for="cheese" class="label-radio">Cheese</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" id="car-battery" />
<label for="car-battery" class="label-radio">Car battery</label>
</li>
</ul>
Submit Buttons
You can use any of the globally available buttons as form submit buttons. Please see the
Buttons section for more information.
Move buttons around with the float-*
classes.
Form with submit button
<form action = "#" class = "form form-theme-standard" >
<fieldset>
<input type = "text" class = "input-text" />
</fieldset>
<fieldset>
<input type = "submit" class = "button-primary float-right" value = "Submit" />
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<fieldset>
<input type="text" class="input-text" />
</fieldset>
<fieldset>
<input type="submit" class="button-primary float-right" value="Submit" />
</fieldset>
</form>
Cancel Link
If you wish to offer a way to cancel the form or go back to a previous step, insert a regular link with the
cancel
class alongside your submit button.
Form with cancel link
<form action = "#" class = "form form-theme-standard" >
<fieldset>
<input type = "text" class = "input-text" />
</fieldset>
<fieldset>
<input type = "submit" class = "button-primary float-right" value = "Submit" />
<a href = "#" class = "cancel" title = "Go back to the previous step" > Back </a>
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<fieldset>
<input type="text" class="input-text" />
</fieldset>
<fieldset>
<input type="submit" class="button-primary float-right" value="Submit" />
<a href="#" class="cancel" title="Go back to the previous step">Back</a>
</fieldset>
</form>
Errors
You can highlight faulty input by adding the error
class to an input field.
Inputs with errors
<label class = "error" > Label </label>
<input type = "text" class = "input-text error" /> <label class="error">Label</label>
<input type="text" class="input-text error" />
<select class = "select error" >
<option> Option </option>
</select> <select class="select error">
<option>Option</option>
</select>
<input type = "radio" class = "input-radio error" />
<label class = "label-radio error" > Label </label> <input type="radio" class="input-radio error" />
<label class="label-radio error">Label</label>
<input type = "checkbox" class = "input-checkbox error" />
<label class = "label-checkbox error" > Label </label> <input type="checkbox" class="input-checkbox error" />
<label class="label-checkbox error">Label</label>
Labels for Required Inputs
Attaching the class required
to labels will (visually) designate the corresponding input as required.
Required inputs
<label for = "a-required-input" class = "required" > Label </label>
<input type = "text" id = "a-required-input" required class = "input-text" /> <label for="a-required-input" class="required">Label</label>
<input type="text" id="a-required-input" required class="input-text" />
Status Messages
If you want a form to give feedback to the user, you may use one of the four status messages.
Please see the Status Messages section for a full description.
Form with error message
<div class = "status-message status-error margin-bottom-s" >
<h4> Error! </h4>
<p>
You fail at using forms. For shame!
</p>
</div> <div class="status-message status-error margin-bottom-s">
<h4>Error!</h4>
<p>
You fail at using forms. For shame!
</p>
</div>
Error!
You fail at using forms. For shame!
HTML5 Validation
The HTML5 Constraint Validation API brings some
powerful (if not yet consistently supported) tools to validate a user's form input on the client side.
We recommend using the Webshims polyfill as a fallback for
legacy browsers who do not natively support the HTML5 Validation API.
Form with HTML5 Contraint Validation