Sign in
Sign in forms allow users to input authentication details (typically a username or email and password) in order to gain access to password protected content and functionality.
Best practices
- Wherever possible, users should be permitted to use an email address or phone number as their username.
- Auto focus on the first input field in the form. This saves time and effort and moves the user directly to the first field.
- Give users the option to see their password as they enter it. This helps reduce input error and can be enabled by a checkbox, toggle, or icon.
- Always include links to recovery options like ‘Forgot password’ and ‘Forgot username’ (where applicable).
- Warn users if caps lock is on.
Example
Sign in
<h2>Sign in</h2>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" class="form-control focusOnLoad">
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<input id="passwordInput" type="password" class="form-control">
<div class="input-group-append input-group-addon">
<button id="passwordToggle" class="btn btn-outline-secondary" type="button"><i aria-label="Hide/show password" class="far fa-eye"></i></button>
</div>
</div>
<button class="pl-0 btn btn-link">Forgot password?</button>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="remember">
<label class="custom-control-label" for="remember">Remember me</label>
</div>
</div>
<div class="form-group mt-4">
<input disabled class="btn btn-primary" type="submit" value="Sign in">
</div>
</div>
</div>
</form>
Add the following JavaScript for the hide/show password functionality:
$("#passwordToggle").click(function(){
$("#passwordToggle i").toggleClass('fa-eye fa-eye-slash')
if($("#passwordInput").attr("type") == 'password'){
$("#passwordInput").attr("type", "text");
}else{
$("#passwordInput").attr("type", "password");
}
});
To auto focus an input on load use the focusOnLoad
class on your input and include the following JavaScript:
$('.focusOnLoad').focus();