Pattern Library (ver. 1.9)

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

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


<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

All fields are required.

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() {
		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

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() {
		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&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>

			<!-- 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&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>

		<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&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-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&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">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&hairsp;/&hairsp;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>