# 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
3. Form Structure
4. Form Elements
   1. Text Inputs
      1. Optimizations for Mobile Users
   2. Select Fields
   3. Inputs with Icons
   4. Input Controls
      1. Radio Buttons
      2. Checkboxes
      3. Toggle Switches
   5. Submit Buttons
   6. Dropdown links
   7. Errors
   8. Required and Optional Labels
   9. Disabled Inputs
5. Status Messages
6. HTML5 Validation
7. Troubleshooting

## Form Wrapper

To build a standard form, apply the class `form` to your form element.

Form wrapper

## Form Themes

Apply a form theme with a `form-theme-*` class on the form element.

With no specific theme defined, your form will have a transparent background.

### Standard Form Theme

This is the standard form theme.

Form with standard theme

#### Standard Form

Label

## Form Structure

Forms are structured using the grid layout. Use the `gutter-form` gutter on your grid to apply the appropriate spacing between form elements.

Basic form using the grid layout

### Demo Form

Label 1
Label 2
Label 3
Label 4
Label 5
Lbl 6
Lbl 7
Lbl 8
Lbl 9
Back

## Form Elements

### Text Inputs

All text inputs get the class `input-text`, and are wrapped in a surrounding `input-text-container`.

Additionally, each `input` should have a `label` that helps the user understand which kind of input is asked from them. Labels should contain no more than one or two words.

If you need to provide additional explanation, use the `input-label-helper-text` element. Place the helper text after the `input` in the markup.

Text inputs

First name Helper text

#### Optimizations for Mobile Users

Try to always use the appropriate input type for the use case to allow mobile phones to choose the best suited keyboard, toggle auto capitalization, etc.

For example, use `type="tel"` for phone numbers and `type="email"` for email addresses. If you're uncertain which type to use (such as with house numbers, where `type="number"` might be too restrictive), stick with `type="text"`.

For more information, follow Apple's "Text Programming Guide for iOS" or this article from treehouse.

Text inputs with specific types

Your homepage

E-mail

Telephone

### Select Fields

Select fields get the class `select` and are wrapped in a `select-container` element.

Select fields

    <div class="select-container">
      <label class="input-label" for="main-ingredient">Main ingredient</label>
      <select id="main-ingredient" 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>
    </div>

Main ingredient

### Inputs with Icons

You can place icons on text inputs and select fields to provide an additional hint about what type of input is required. To place an icon, insert the appropriate icon element before the input field and apply either `input-icon-left` or `input-icon-right`.

Make sure to place the icon before the actual form field so that the input field can reserve the appropriate space.

Text input with icons

Not allowed
Select field with icons

Edible things

### Input Controls

Input controls are radio buttons, checkboxes, and toggle switches. Each of these is comprised of a container element, the input itself, and the corresponding label.

Collections of input controls can be shown in two styles: The default style, where each input stands by itself, and a long-list style, which helps readability in long lists of inputs.

Note: Make sure to provide proper labels to all of your controls, otherwise users will not be able to interact with them. Also, place your `input` before your `label`, otherwise the checkbox will not be clickable.

#### Radio Buttons

Create a radio button with the `input-radio`, `label-radio`, and `radio-container` elements.

Optionally, apply the `radio-list` class on the surrounding list to use the long-list format.

Radio buttons, default and long-list style

- Apple
- Banana

    <ul class="radio-list">
      <li class="radio-container">
        <input type="radio" class="input-radio" id="apple-2" name="fruit-2" checked />
        <label for="apple-2" class="label-radio">Apple</label>
      </li>
      <li class="radio-container">
        <input type="radio" class="input-radio" id="banana-2" name="fruit-2" />
        <label for="banana-2" class="label-radio">Banana</label>
      </li>
    </ul>

- Apple
- Banana

#### Checkboxes

Create a checkbox with the `input-checkbox`, `label-checkbox`, and `checkbox-container` elements.

Optionally, apply the `checkbox-list` class on the surrounding list to use the long-list format.

Checkboxes, default and long-list style

Pears
Cheese
Car battery

- Pears
- Cheese
- Car battery

#### Toggle Switches

Create a toggle switch with the `input-toggle-switch`, `label-toggle-switch`, and `toggle-switch-container` elements.

Optionally, apply the `toggle-switch-list` class on the surrounding list to use the long-list format.

Toggle switches, default and long-list style

Newly renovated
Balcony
Garage

- Newly renovated
- Balcony
- Garage

### Submit Buttons

You can use any of the globally available buttons as form submit buttons. Please see the Buttons section for more information.

Form with submit button

Credit Card Number
Back

### Dropdown Links

You can use select lists as dropdown links when there is no further action required to confirm the selection. A good example of such a use case would be sorting, where a sorting option needs to be selected to get an ordered list.

Dropdown links have a `select` which is wrapped in a surrounding `div.dropdown-link`.

Additionally, you can add an icon to the dropdown by adding a span with class `dropdown-link-icon` along with font-icon classes (like fa-* and icon-*).

Dropdown link

Dropdown link with icon

If you have very little space to work with, you can hide the text labels and show only the icon using the `dropdown-link-icon-only` class. You can also apply this behavior only to small devices with `palm-dropdown-link-icon-only`.

Dropdown link without text

Dropdown link without text on mobile

### Errors

Highlight faulty input by adding the `error` class to an input field or label.

Inputs with errors

    <label for="input-error" class="input-label error" >Label</label>
    <input id="input-error" type="text" class="input-text error" />

Label

    <div class="select-container">
      <label for="select-error" class="input-label">Label</label>
      <select id="select-error" class="select error">
        <option>Option</option>
      </select>
    </div>

Label

Label

I hereby give up control of my private data in service of a greater purpose

### Required and Optional Labels

Mark required and optional inputs with the `label-required` and `label-optional` classes, respectively.

Note that required inputs do not get their own visual designation because required inputs are the norm, while optional inputs appear less often.

Required Label

Something important
Optional Label

Something unimportant

### Disabled Inputs

For the sake of usability, please do not deactivate form inputs. Make sure all of your input fields are usable.

## Status Messages

To give feedback to the user, use one of the status messages.

Form with error message

#### Error

The email address you provided appears to be incorrect.

### Erroneous Form Data

E-Mail

## HTML5 Validation

We recommend to use the HTML5 Constraint Validation API to validate a user's form input on the client side.

Form with HTML5 Contraint Validation

### A Form

Title
First name

The thing that people you know call you by

Last name
E-Mail
Phone
Website
Street
No.
ZIP
City
Your message
Please accept this. Or not. Your choice. (But we'd appreciate it.)
Check this if you've read our Terms and Conditions. Or just clicked on the link and scrolled through the thing. Actually, we all know you'll just go ahead and check this, anyway.

## Troubleshooting

### Why is my radio button, checkbox, or toggle switch not clickable?

- Linking label and input control via `id` and `for` makes the label area clickable.
- Still not clickable? Make sure your `input` appears before your `label`.