Skip to Main Content

Pelican Design System icon 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.

Edit on GitHub

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.
  • Change the heading level when appropriate.

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.

Want help making a User ID?
  • 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.
Want help making a Password?
  • 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="form-title">
          <span class="icon fas fa-user-shield text-primary-10 me-1" aria-hidden="true"></span>Create User ID &amp; Password
        </h3>
      </div>
      <div class="col-12">
        <p>We need to get some information to start. We&rsquo;ll ask you to create a User ID, and a Password.</p>
        <p class="small">If there&rsquo;s an asterisk <span class="icon fas fa-asterisk text-danger me-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="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>User ID
          </label>
          <input type="text" class="form-control" id="UserID">
          <details class="mt-2">
            <summary class="text-ui-priority">
              Want help making a User ID?
            </summary>
            <ul class="list-group mt-2">
              <li class="list-group-item">
                <div class="media">
                  <span class="icon fas fa-times-circle text-danger me-2" aria-hidden="true"></span>
                  <div class="media-body">Don&rsquo;t use any special character twice in a row.</div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <span class="icon fas fa-check-circle text-success me-2" aria-hidden="true"></span>
                  <div class="media-body">You can use one of these symbols: <kbd> - @ _</kbd> , but
                    not twice in a row.</div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <span class="icon fas fa-check-circle text-success me-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="icon fas fa-check-circle text-success me-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="icon fas fa-check-circle text-success me-2" aria-hidden="true"></span>
                  <div class="media-body">You must use least 8 characters but fewer than 64.</div>
                </div>
              </li>
            </ul>
          </details>
        </div>
        <div class="form-group">
          <label for="Password">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Password
          </label>
          <input type="password" class="form-control" id="Password"><details class="mt-2">
  <summary class="text-ui-priority">
    Want help making a Password?
  </summary>

  <ul class="list-group mt-2">
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-times-circle text-danger" aria-hidden="true"></span>
        <div class="media-body ms-1">Don’t use a password from any of your other accounts.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">You must use letters and numbers.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">Make some letters uppercase, make letters some lowercase.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">Use some of these symbols too: <br><kbd> { [ ( &lt; ! # , $ % ^ @ : \ | / &amp; * - _ +=;&gt; ) ] } </kbd></div>
      </div>
    </li>
  </ul>
</details>
</div>
        <div class="form-group">
          <label for="PasswordConfirm">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Confirm Password
          </label>
          <input type="password" class="form-control" id="PasswordConfirm">
        </div>
        <button class="btn btn-primary btn-shadow">
          <span class="icon fas fa-check me-1" aria-hidden="true"></span>Create Password
        </button>
      </div>
    </div>
  </div>
</div>
Previous
Next
Page top