4 Forms

Form elements

4.1 Form link

Forms should be used to collect information from users. See the search and button components for other uses.

Guidelines:

  • Mark fields as required
  • Use the correct HTML5 input type for the purpose, not just text
  • Add help text when needed, such as if purpose or required format of the input is non-obvious

Usage

<!-- #fullwidth -->
<div class="b-page-section">
    <div class="row">
        <div class="column small-12">
            <form action="" class="b-form">
                <input type="text" id="name" placeholder="Name" />
                <input type="email" id="mail" placeholder="Email"/>
                <textarea id="msg" placeholder="Message"></textarea>
                <input type="submit" value="Send">
            </form>
        </div>
    </div>
</div>
<!-- inverted -->
<div class="b-page-section m-black">
    <div class="row">
        <div class="column small-12">
            <form action="" class="b-form m-negative">
                <input type="text" id="name" placeholder="Name"/>
                <input type="email" id="mail" placeholder="Email"/>
                <textarea id="msg" placeholder="Message"></textarea>
                <input type="submit" value="Send">
            </form>
        </div>
    </div>
</div>
Show All Modifiers
.m-negative — inverted color scheme for dark backgrounds

4.2 Multi-Column link

Forms can be used in conjunction with the .b-grid-container component for multi-column form layouts.

Usage

<form action="" class="b-form">
    <div class="row">
        <div class="large-6 columns">
            <input type="text" id="name" placeholder="Name"/>
            <input type="email" id="mail" placeholder="Email"/>
            <input type="email" id="password" placeholder="Password"/>
            <textarea id="msg" placeholder="Message"></textarea>
            <input type="submit" value="Send">
        </div>
        <div class="large-6 columns">
            <div class="e-select">
                <select>
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
            <div class="e-checkbox">
                <input type="checkbox" id="checkbox-1"><label for="checkbox-1">I agree with the terms of service</label>
            </div>
            <div class="e-checkbox">
                <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Send me updates about open data</label>
            </div>
        </div>
    </div>
</form>

4.3 Input / Textarea link

Supports HTML5 form types. (text, email, password, etc.) Field names should be included as placeholder attribute where possible Doesn't need a parent element, simply include in .b-form

Usage

<form action="" class="b-form">
    <input type="text" placeholder="Text Input" />
    <textarea id="msg" placeholder="Message"></textarea>
</form>

4.4 Checkbox link

Usage

<form action="" class="b-form">
    <div class="e-checkbox">
        <input type="checkbox" id="one-checkbox"><label for="one-checkbox">I'm a Checkbox</label>
    </div>
    <div class="e-checkbox">
        <input type="checkbox" id="another-checkbox" disabled><label for="another-checkbox">I'm Disabled</label>
    </div>
</form>

4.5 Radio link

Radio buttons should be inside a .e-radio element.

Usage

<form action="" class="b-form">
    <div class="e-radio">
        <input type="radio" id="radio-1" name="guide"><label for="radio-1">I'm a Radio</label>
    </div>
    <div class="e-radio">
        <input type="radio" id="radio-2" name="guide"><label for="radio-2">Me Too</label>
    </div>
    <div class="e-radio">
        <input type="radio" id="radio-3" name="guide" disabled><label for="radio-3">Disabled</label>
    </div>
</form>

4.6 Select link

Select controls should be wrapped in an .e-select parent element.

Usage

<form action="" class="b-form">
    <div class="e-select">
        <select>
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
        </select>
    </div>
</form>