Guidance
This form is for applications or websites where users need to make an account.
Do
- Always show users the password requirements
- Only ask for required information
Don’t
- If the email address serves as the username, always label the field email (on the create account and sign in form) to prevent confusion
- Use account creation forms to gather extra data about your users
You will need gnb-password-validation-1.0.0.js to show inline password validation.
Create your account
HTML
<h2 class="margin-bottom-md">Create your account</h2>
<div class="row">
<div class="col-sm-8 col-md-6">
<form>
<label for="first-name">First name</label>
<input type="text" id="first-name" name="first-name" />
<label for="last-name">Last name</label>
<input type="text" id="last-name" name="last-name" />
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<label for="gnb-validate-password">Password</label>
<input type="password" id="gnb-validate-password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
required>
<div class="gnb-form-helper-text" id="message">
<p>Your password must contain:</p>
<ul class="icon-list list-md">
<li id="number" class="dont">a number</li>
<li id="capital" class="dont">a capital letter</li>
<li id="length" class="dont">at least 8 characters</li>
</ul>
</div>
<fieldset class="gnb-checkboxes fieldset-container">
<legend class="sr-only">Opt-in consent</legend>
<div class="single-option">
<input type="checkbox" name="accept" id="accept-terms">
<label for="accept-terms">I agree and accept the terms of use.</label>
</div>
</fieldset>
<button type="submit" class="btn-primary">Create account</button>
</form>
</div>
</div>