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

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

Code


<script src="js/jquery-3.5.1.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

Title

First name (required)

Last name(required)

Address example 1: one field

Address (required)

Address example 2: three fields

Unit number

Street address (required)

Quadrant (required)

Address example 3: five fields

Unit number

Building number (required)

Street name (required)

Street type (required)

Quadrant (required)

City (required)

Province (required)

Postal code (required)

Format: A1A1A1

Contact Information

Email address (required)

Home phone

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

Mobile phone

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

Work phone

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

Additional information

Do you wish to recieve email communications from lorem ipsum dolar?

Yes

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)

By checking this box, I agree to the Terms and Conditions.

Code


<script src="js/jquery-3.5.1.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>

Multiple groups

Code


<!--Use the <fieldset> tag to group related elements in a form-->
<!--As the labels in both groups have the same text, the fieldset element also helps to distinguish the form fields by their groups. -->
<form class="form-width-xl" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	<fieldset class="bordered mb-md">
		<legend id="legend-example" class="form-text">Lorem ipsum dolar group</legend>
		<div class="row">
			<!--form-group-responsive is help to adjust the spacing from the div bottom-->
			<div class="col-12 col-md-5 form-group-responsive">
				<label for="ex-group-Lorem">Lorem ipsum</label>
				<input id="ex-group-Lorem" name="ex-group-Lorem" type="text" class="form-control" aria-describedby="t-ex-group-Lorem legend-example">
				<p id="t-ex-group-Lorem" class="form-text">Example helper text for the lorem ipsum input.</p>
			</div>
			<div class="col-12 col-md-4 form-group-responsive">
				<label for="ex-group-neque">Neque</label>
				<input id="ex-group-neque" name="ex-group-neque" type="text" class="form-control" aria-describedby="legend-example">
			</div>
			<div class="col-12 col-md-3 form-group-responsive">
				<button class="cui btn-md utility-btn-solid multiple-group-btn" data-toggle="modal" data-target="#form-modal" aria-describedby="legend-example"> 
					<span class="cicon-minus-thin left" aria-hidden="true"></span>
					Delete
				</button>
			</div>
		</div>
	</fieldset>

	<fieldset class="bordered">
		<legend id="legend-example-2" class="form-text">Lorem ipsum dolar</legend>
		<div class="row">
			<div class="col-12 col-md-5 form-group-responsive">
				<label for="ex-group-Lorem-2">Lorem ipsum</label>
				<input id="ex-group-Lorem-2" name="ex-group-Lorem" type="text" class="form-control" aria-describedby="t-ex-group-Lorem-2 legend-example-2" >
				<p id="t-ex-group-Lorem-2" class="form-text">Example helper text for the lorem ipsum input.</p>
			</div>
			<div class="col-12 col-md-4 form-group-responsive">
				<label for="ex-group-neque-2">Neque</label>
				<input id="ex-group-neque-2" name="ex-group-neque-2" type="text" class="form-control" aria-describedby=" legend-example-2">
			</div>
			<div class="col-12 col-md-3 form-group-responsive">
				<button class="cui btn-md utility-btn-solid multiple-group-btn" data-toggle="modal" data-target="#form-modal" aria-describedby="legend-example-2"> 
					<span class="cicon-minus-thin left" aria-hidden="true"></span>
					Delete
				</button>
			</div>
		</div>
	</fieldset>	
		<button class="cui btn-md utility-btn-solid multiple-group-btn multiple-group-btn-add" >  
			<span class="cicon-plus-thin left" aria-hidden="true"></span>
			Add
		</button>
</form>

<!--form-modal: The alert message will be displayed before delete the form -->
<!-- Button element used to open the modal. Ensure the `data-target` attribute points to the id of the modal. -->

<div id="form-modal" class="cui modal modal-form " tabindex="-1" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
	<div class="modal-dialog modal-fs-mobile"" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h2 id="warning" class="modal-title">
					<span class="cicon-exclamation-triangle coc-main" aria-hidden="true"></span>
					Confirm Delete
				</h2>
			</div>
			<div class="modal-body">
				<p class="mb-0">You are about to lose the information entered in the <Name of the group- e.g., Item 2>.</p>
				<p class="mb-0">Are you sure you want to continue?</p>
			</div>
			<div class="modal-footer">
				<button class="cui btn-md primary">
					<span class="btn-wrapper">
						<span class="btn-text">Yes, Delete</span>
					</span>
				</button>
				<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">
					No, Keep information
				</button>
			</div>
		</div>
	</div>
</div>