Note |
This page is archived under version 1.9 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 class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
<div class="form-group">
<label for="username">Username / email <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">Password <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>Account registration
<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() {
COC.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">First name</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">Last name</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">Email</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">Password</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">Re-enter your password</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="terms.html" 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
<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() {
COC.Form.init();
});
</script>
<!--Use the <fieldset> tag to group related elements in a form-->
<form class="form-width-lg" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
<div class="cui subtitle-block">
<h2>Form heading</h2>
<hr>
</div>
<fieldset class="form-section">
<legend class="h3">Personal information</legend>
<div class="form-row">
<div class="col-6 col-md-2">
<div class="form-group">
<label for="honorific">Title</label>
<select id="honorific" name="honorific" class="form-control">
<option value="">Select…</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>
<!-- Force next columns to break to new line for small breakpoint only -->
<div class="cui-width-100 d-none d-sm-block d-md-none"></div>
<div class="col-sm-6 col-md-5">
<div class="form-group">
<label for="first-name">First name <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">Last name <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">Address <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>
<h4>Address example 2: three fields</h4>
<div class="form-row">
<div class="col-6 col-sm-4">
<div class="form-group">
<label for="ex-2-unit">Unit number</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">Street address <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-6 col-sm-4">
<div class="form-group">
<label for="ex-2-quadrant">Quadrant <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…</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>
<h4>Address example 3: five fields</h4>
<div class="form-row">
<div class="col-6 col-sm-6">
<div class="form-group">
<label for="ex-3-suite">Unit number</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">Building number <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">Street name <span class="label-required d-md-blocks">(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-6 col-sm-4 col-md-3">
<div class="form-group">
<label for="ex-3-street-type">Street type <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…</option>
<option value="1">Alley</option>
<option value="2">Avenue</option>
<option value="3">Bay</option>
<option value="4">Boulevard</option>
<option value="5">…</option>
</select>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3">
<div class="form-group">
<label for="ex-3-quadrant">Quadrant <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…</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">City <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">Province <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">Postal code <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>
</fieldset>
<fieldset class="form-section">
<legend class="h3">Contact Information</legend>
<div class="form-group">
<label for="email">Email address <span class="label-required">(required)</span></label>
<div class="input-width-lg">
<input id="email" name="email" type="email" class="form-control" maxlength="60" aria-required="true" required>
</div>
</div>
<div class="form-group">
<label for="tel-home">Home phone</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">Mobile phone</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">Work phone</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>
</fieldset>
<fieldset class="form-section">
<legend class="h3">Additional information</legend>
<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="terms.html" target="_blank">Terms and Conditions</a> and / or <a href="privacy.html" 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>
</fieldset>
</form>