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="#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>