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
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
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="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 form example
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">
<div class="cui subtitle-block">
<h2>Form heading</h2>
<hr>
</div>
<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…</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="w-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">
<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-6 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-6 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…</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-6 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-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">
<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…</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">
<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…</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>
<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">
<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="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>
</section>
</form>