Pelican Design System
Create User ID & Password
Create User ID & Password
The Create User ID & Password form allows users to create and update their User ID & Password.
On this page:
Best Practices
- MyLa should be used to allow users to create their User ID & Password. If not, use this form.
- Put the form into a column to size as necessary.
Usage
Create User ID & Password
We need to get some information to start. We’ll ask you to create a User ID, and a Password.
If there’s an asterisk we have to get that information.
-
Don’t use any special character twice in a row.
-
You can use one of these symbols:
- @ _ , but not twice in a row. -
You must use at least one English letter, A–Z or a–z.
-
You can use numbers too.
-
You must use least 8 characters but fewer than 64.
-
Don’t use a password from any of your other accounts.
-
You must use letters and numbers.
-
Make some letters uppercase, make letters some lowercase.
-
Use some of these symbols too:
{ [ ( < ! # , $ % ^ @ : \ | / & * - _ +=;> ) ] }
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3 class="h3 mb-6 text-primary">
<span class="fas fa-user-shield text-primary-10 mr-1" aria-hidden="true"></span>Create User ID & Password
</h3>
</div>
<div class="col-12">
<p>We need to get some information to start. We’ll ask you to create a User ID, and a Password.</p>
<p class="small">If there’s an asterisk <span class="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span>we have to get
that information.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="UserID">
<span class="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span>User ID
</label>
<input type="text" class="form-control" id="UserID">
<p class="mt-1">
<button class="btn btn-link btn-sm bg-transparent shadow-none border-0 text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseUserIDTips" aria-expanded="false" aria-controls="collapseUserIDTips" aria-haspopup="true"><span class="fas fa-lightbulb"></span> Want help making a User ID?</button>
</p>
<div class="collapse" id="collapseUserIDTips">
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<span class="fas fa-times-circle text-danger mr-2" aria-hidden="true"></span>
<div class="media-body">Don’t use any special character twice in a row.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">You can use one of these symbols: <br class="d-block "> <kbd> - @ _</kbd> , but
not twice in a row.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">You must use at least one English letter, A–Z or a–z.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">You can use numbers too.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">You must use least 8 characters but fewer than 64.</div>
</div>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="Password">
<span class="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span>Password
</label>
<input type="password" class="form-control" id="Password">
<p class="mt-1">
<button class="btn btn-link btn-sm bg-transparent shadow-none border-0 text-decoration-none" type="button" data-toggle="collapse" data-target="#collapsePasswordTips" aria-expanded="false" aria-controls="collapsePasswordTips" aria-haspopup="true"><span class="fas fa-lightbulb"></span> Want help making a Password?</button>
</p>
<div class="collapse" id="collapsePasswordTips">
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<span class="fas fa-times-circle text-danger mr-2" aria-hidden="true"></span>
<div class="media-body">Don’t use a password from any of your other accounts.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">You must use letters and numbers.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">Make some letters uppercase, make letters some lowercase.</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
<div class="media-body">Use some of these symbols too: <br><kbd> { [ ( < ! # , $ % ^ @ : \ | / & * - _ +=;> ) ] } </kbd></div>
</div>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="PasswordConfirm">
<span class="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span>Confirm Password
</label>
<input type="password" class="form-control" id="PasswordConfirm">
</div>
<button class="btn btn-primary btn-shadow">
Create Password<span class="fas fa-check-circle ml-1" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>