Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Example forms

Below are common examples of forms and how they can be laid out. Use the examples below as a baseline for your apps or websites.

Include jquery.validate.min.js and coc.forms.min.js for client-side form validation and to dynamically generate the 'clear' and 'show password' buttons for supported inputs.


Login form example

Example optional helper text:
Your username is the email you used to sign up for this account.

Example optional helper text:
Your password contains at least 8 characters.

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
    $( document ).ready( function() {
        COCPL_Form.init();
    });
</script>

<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <div class="form-group">
        <label for="username">
            <span class="field-name">Username / email</span>
            <span class="label-required">(required)</span>
        </label>
        <input id="username" name="username" type="email" class="form-control" maxlength="50" aria-describedby="t-login-username" aria-required="true" required>
        <p id="t-login-username" class="form-text">Example optional helper text:<br>Your username is the email you used to sign up for this account.</p>
    </div>

    <div class="form-group">
        <label for="password">
            <span class="field-name">Password</span>
            <span class="label-required">(required)</span>
        </label>
        <input id="password" name="password" type="password" class="form-control" minlength="8" maxlength="100" aria-describedby="t-login-password" aria-required="true" required>
        <p id="t-login-password" class="form-text">Example optional helper text:<br>Your password contains at least 8 characters.</p>
    </div>

    <div class="form-group clearfix">
        <button class="cui btn-md primary" type="submit">Submit</button>
        <a class="cui btn-md primary-text float-right">Forgot your username or password?</a>
    </div>
</form>

Online account registration form example

Example optional helper text: Your password should contain at least 8 characters.

Example optional helper text: Enter the same password as above.

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
    $( document ).ready( function() {
        COCPL_Form.init();
    });
</script>

<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <div class="form-row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="acc-first-name">
                    <span class="field-name">First name</span>
                    <span class="label-required">(required)</span>
                </label>
                <input id="acc-first-name" name="acc-first-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="acc-last-name">
                    <span class="field-name">Last name</span>
                    <span class="label-required">(required)</span>
                </label>
                <input id="acc-last-name" name="acc-last-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="acc-email">
            <span class="field-name">Email</span>
            <span class="label-required">(required)</span>
        </label>
        <input id="acc-email" name="acc-email" type="email" class="form-control" maxlength="50" aria-required="true" required>
    </div>

    <div class="form-group">
        <label for="acc-password-1">
            <span class="field-name">Password</span>
            <span class="label-required">(required)</span>
        </label>
        <input id="acc-password-1" name="acc-password-1" type="password" class="form-control" minlength="8" maxlength="100" aria-describedby="t-acc-password-1" aria-required="true" required>
        <p id="t-acc-password-1" class="form-text">Example optional helper text: Your password should contain at least 8 characters.</p>
    </div>

    <div class="form-group">
        <label for="acc-password-2">
            <span class="field-name">Re-enter your password</span>
            <span class="label-required">(required)</span>
        </label>
        <input id="acc-password-2" name="acc-password-2" type="password" class="form-control" minlength="8" maxlength="100" data-rule-equalTo="#acc-password-1" aria-describedby="t-acc-password-2" aria-required="true" required>
        <p id="t-acc-password-2" class="form-text">Example optional helper text: Enter the same password as above.</p>
    </div>

    <div class="form-group">
        <div class="form-check form-check-inline">
            <input id="acc-terms" name="acc-terms" type="checkbox" class="form-check-input" aria-required="true" required>
            <label for="acc-terms" class="form-check-label">By checking this box, I agree to the <a href="#link-to-terms" target="_blank">Terms and Conditions</a>.</label>
        </div>
    </div>

    <div class="form-group">
        <button class="cui btn-md primary" type="submit">Submit</button>
    </div>
</form>

Detailed registration form example

Form heading


Personal information

Address example 1: one field


Address example 2: three fields


Address example 3: five fields

Format: A1A1A1

Contact Information

Example optional helper text:
Format: XXX-XXX-XXXX

Example optional helper text:
Format: XXX-XXX-XXXX

Example optional helper text:
Format: XXX-XXX-XXXX

Additional information

Do you wish to recieve email communications from lorem ipsum dolar?
This is an example legal section where you may link to the Terms and Conditions and / or Privacy Policy, along with any other required legal text. (required)

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
    $( document ).ready( function() {
        COCPL_Form.init();
    });
</script>

<form class="form-width-lg" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <section class="form-section">
        <h3>Personal information</h3>

        <div class="form-row">
            <div class="col-6 col-md-2">
                <div class="form-group">
                    <label for="honorific">
                        <span class="field-name">Title</span>
                    </label>
                    <select id="honorific" name="honorific" class="form-control">
                        <option value="">Select&hellip;</option>
                        <option value="dr">Dr.</option>
                        <option value="mr">Mr.</option>
                        <option value="mrs">Mrs.</option>
                        <option value="ms">Ms.</option>
                        <option value="miss">Miss</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6 col-md-5">
                <div class="form-group">
                    <label for="first-name">
                        <span class="field-name">First name</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <input id="first-name" name="first-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-6 col-md-5">
                <div class="form-group">
                    <label for="last-name">
                        <span class="field-name">Last name</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <input id="last-name" name="last-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
        </div>

        <div class="form-group">
            <h4>Address example 1: one field</h4>
            <label for="ex-1-address">
                <span class="field-name">Address</span>
                <span class="label-required">(required)</span>
            </label>
            <input id="ex-1-address" name="ex-1-address" type="text" class="form-control" maxlength="100" aria-required="true" required>
        </div>

        <br>
        <h4>Address example 2: three fields</h4>
        <div class="form-row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="ex-2-unit">
                        <span class="field-name">Unit #</span>
                    </label>
                    <input id="ex-2-unit" name="ex-2-unit" type="text" class="form-control" maxlength="10">
                </div>
            </div>
            <div class="col-sm-8">
                <div class="form-group">
                    <label for="ex-2-street-address">
                        <span class="field-name">Street address</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <input id="ex-2-street-address" name="ex-2-street-address" type="text" class="form-control" maxlength="100" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="ex-2-quadrant">
                        <span class="field-name">Quadrant</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <select id="ex-2-quadrant" name="ex-2-quadrant" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="nw">NW</option>
                        <option value="ne">NE</option>
                        <option value="sw">SW</option>
                        <option value="se">SE</option>
                    </select>
                </div>
            </div>
        </div>

        <br>
        <h4>Address example 3: five fields</h4>
        <div class="form-row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="ex-3-suite">
                        <span class="field-name">Unit #</span>
                    </label>
                    <input id="ex-3-suite" name="ex-3-suite" type="text" class="form-control" maxlength="10">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="ex-3-building-num">
                        <span class="field-name">Building #</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <input id="ex-3-building-num" name="ex-3-building-num" type="text" class="form-control" maxlength="10" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-8 col-md-6">
                <div class="form-group">
                    <label for="ex-3-street-name">
                        <span class="field-name">Street name</span>
                        <span class="label-required d-block-xs">(required)</span>
                    </label>
                    <input id="ex-3-street-name" name="ex-3-street-name" type="text" class="form-control" maxlength="100" aria-required="true" required>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
                <div class="form-group">
                    <label for="ex-3-street-type">
                        <span class="field-name">Street type</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <select id="ex-3-street-type" name="ex-3-street-type" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="1">Alley</option>
                        <option value="2">Avenue</option>
                        <option value="3">Bay</option>
                        <option value="4">Boulevard</option>
                        <option value="5">&hellip;</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-4 col-md-3">
                <div class="form-group">
                    <label for="ex-3-quadrant">
                        <span class="field-name">Quadrant</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <select id="ex-3-quadrant" name="ex-3-quadrant" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="nw">NW</option>
                        <option value="ne">NE</option>
                        <option value="sw">SW</option>
                        <option value="se">SE</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="city">
                        <span class="field-name">City</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <input id="city" name="city" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="province">
                        <span class="field-name">Province</span>
                        <span class="label-required">(required)</span>
                    </label>
                    <select id="province" name="province" class="form-control" aria-required="true" required>
                        <option value="">Select your province</option>
                        <option value="1">Alberta</option>
                        <option value="2">British Columbia</option>
                        <option value="3">Manitoba</option>
                        <option value="4">New Brunswick</option>
                        <option value="5">Newfoundland and Labrador</option>
                        <option value="6">Northwest Territories</option>
                        <option value="7">Nova Scotia</option>
                        <option value="8">Nunavut</option>
                        <option value="9">Ontario</option>
                        <option value="10">Prince Edward Island</option>
                        <option value="11">Quebec</option>
                        <option value="12">Saskatchewan</option>
                        <option value="13">Yukon</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="postal-code">
                <span class="field-name">Postal code</span>
                <span class="label-required">(required)</span>
            </label>
            <div class="input-width-sm">
                <input id="postal-code" name="postal-code" type="text" class="form-control" minlength="6" maxlength="7" aria-describedby="t-postal-code" aria-required="true" required>
            </div>
            <p id="t-postal-code" class="form-text">Format: A1A1A1</p>
        </div>
    </section>

    <section class="form-section">
        <h3>Contact Information</h3>

        <div class="form-group">
            <label for="email">
                <span class="field-name">Email address</span>
                <span class="label-required">(required)</span>
            </label>
            <input id="email" name="email" type="email" class="form-control" maxlength="60" aria-required="true" required>
        </div>

        <div class="form-group">
            <label for="tel-home">
                <span class="field-name">Home phone</span>
            </label>
            <div class="input-width-md">
                <input id="tel-home" name="tel-home" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-home">
            </div>
            <p id="t-tel-home" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </div>
        <div class="form-group">
            <label for="tel-mobile">
                <span class="field-name">Mobile phone</span>
            </label>
            <div class="input-width-md">
                <input id="tel-mobile" name="tel-mobile" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-mobile">
            </div>
            <p id="t-tel-mobile" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </div>

        <div class="form-group">
            <label for="tel-work">
                <span class="field-name">Work phone</span>
            </label>
            <div class="input-width-md">
                <input id="tel-work" name="tel-work" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-work">
            </div>
            <p id="t-tel-work" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </p>
    </section>

    <section class="form-section">
        <h3>Additional information</h3>

        <fieldset class="form-group bordered">
            <legend id="legend-example-check" class="form-text">Do you wish to recieve email communications from lorem ipsum dolar?</legend>
            <div class="form-check">
                <input type="radio" class="form-check-input" name="example-radio" id="example-radio-1" value="1" aria-describedby="legend-example-check">
                <label for="example-radio-1" class="form-check-label">Yes</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" name="example-radio" id="example-radio-0" value="0" aria-describedby="legend-example-check">
                <label for="example-radio-0" class="form-check-label">No</label>
            </div>
        </fieldset>

        <fieldset class="form-group">
            <legend id="legend-terms" class="form-text">This is an example legal section where you may link to the <a href="#" target="_blank">Terms and Conditions</a> and&hairsp;/&hairsp;or <a href="#" target="_blank">Privacy Policy</a>, along with any other required legal text. <span class="label-required">(required)</span></legend>
            <div class="form-check form-check-inline">
                <input id="terms" name="terms" type="checkbox" class="form-check-input" value="1" aria-describedby="legend-terms" aria-required="true" required>
                <label for="terms" class="form-check-label">By checking this box, I agree to the Terms and Conditions.</label>
            </div>
        </fieldset>

        <div class="form-group">
            <button class="cui btn-md primary" type="submit">Submit</button>
        </div>
    </section>
</form>