Forms

Cross browser normalized responsive forms with minimal styling to allow easy overrides and lean CSS.

All inputs are responsive with progressively enhanced fallbacks for unsupported types. A hook class .focus is available to add focus to fields, .no-edit can be used to mimic non-editable inputs, and all fields can be made to display inline by adding the class .inline-block or stretch to full width by adding the class .full-width.

Smaller elements such as radio and checkbox inputs can be aligned by wrapping them in a div with the class .input-tamer.


Standard Layout

Default Form

Support text to help describe the input.

No edit

Horizontal Layout

Add class .form-horizontal.

Horizontal Form

Support text to help describe the input.

No edit

The Markup

The entire markup for the first form. Note the lack of extra elements required for arranging inputs.

<form action="#">
    <fieldset>
        <legend>Default Form</legend>
        <label for="input-focused1">Focused</label>
        <input type="text" id="input-focused1" class="focus" value="focused input..." />
        <label for="input-disabled1">Disabled</label>
        <input type="text" id="input-disabled1" disabled value="disabled input..." />
        <p>Support text to help describe the input.</p>
        <label for="input-no-edit1">Non editable</label>
        <span id="input-no-edit1" class="no-edit">No edit</span>
        <label for="select-default1">Select</label>
        <select id="select-default1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        <label for="input-file1">File upload</label>
        <input id="input-file1" type="file" />
        <label for="input-password1">Password</label>
        <input type="password" id="input-password1" />
        <label for="input-time1">Time</label>
        <input type="time" id="input-time1" />
        <label for="input-week1">Week</label>
        <input type="week" id="input-week1" />
        <label for="input-month1">Month</label>
        <input type="month" id="input-month1" />
        <label for="input-date1">Date</label>
        <input type="date" id="input-date1" />
        <label for="input-datetime1">Datetime</label>
        <input type="datetime" id="input-datetime1" />
        <label for="input-datetime-local1">Datetime Local</label>
        <input type="datetime-local" id="input-datetime-local1" />
        <label for="input-search1">Search</label>
        <input type="search" id="input-search1" />
        <label for="input-color1">Color</label>
        <input type="color" id="input-color1" />
        <label for="input-range1">Range</label>
        <input type="range" id="input-range1" min="0" max="100" value="50" />
        <label for="input-email1">Email</label>
        <input type="email" id="input-email1" />
        <label for="check-disabled1">Disabled Checkbox</label>
        <div class="input-tamer">
            <input type="checkbox" id="check-disabled1" value="option1" disabled="">
        </div>
        <label for="default-textarea1">Textarea</label>
        <textarea id="default-textarea1"></textarea>
    </fieldset>
    <div class="form-actions">
        <button type="submit" class="btn">Save changes</button>
        <button class="btn">Cancel</button>
    </div>
</form>