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.

  1. Form Wrapper
  2. Form Themes
    1. Standard Form Theme
    2. White Form Theme
  3. Form Structure
  4. Form Elements
    1. Text Inputs
    2. Select Fields
    3. Input Sizes
    4. Radio Buttons
    5. Checkboxes
    6. Submit Buttons
    7. Cancel Link
    8. Errors
    9. Labels for Required Inputs
  5. Status Messages
  6. 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 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>

Standard 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>

White 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>

Demo Form

/
/
Back

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="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>

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-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>

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>

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>

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>

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>

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" />

<select class="select error">
    <option>Option</option>
</select>

<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>

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" />

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>

Error!

You fail at using forms. For shame!

Arbitrary Form Data

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

A Form

* Notice about all the hidden subscriptions you are buying along with what you really came here for.