Guidance
Use this sign in form when users need to sign into an account.
Do
- Always provide a forgot password link
- If users sign in with a username, always provide a forgot username link
Don’t
- If users sign in using their email address, don’t label the field "username"
Sign in to your account
If you don’t have one yet, you can create an account.
HTML
<h2>Sign in to your account</h2>
<p>
If you don’t have one yet, you can <a href="#">create an account</a>.
</p>
<div class="row">
<div class="col col-lg-6">
<form>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="email@example.com">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<fieldset class="gnb-checkboxes">
<legend class="visually-hidden">Stay logged in</legend>
<div class="pair">
<input type="checkbox" name="default" id="default">
<label for="default">Remember me</label>
</div>
</fieldset>
<button type="submit" class="btn-primary">Sign in</button>
</form>
<hr />
<ul>
<li><a href="#">Forgot password?</a></li>
</ul>
</div>
</div>