# Forms: Authentication

## Component #1

- Preview
- HTML
- JS

# Welcome back

Login to manage your account.

Your email Please enter a valid email address.
Password Forgot Password?
Please enter a valid password.

Don't have an account yet? Sign up here

                    <!-- Form -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="flex-grow-1 mx-auto" style="max-width: 28rem;">
                        <!-- Heading -->
                        <div class="text-center mb-5 mb-md-7">
                          <h1 class="h2">Welcome back</h1>
                          <p>Login to manage your account.</p>
                        </div>
                        <!-- End Heading -->

                        <!-- Form -->
                        <form class="js-validate needs-validation" novalidate>
                          <!-- Form -->
                          <div class="mb-4">
                            <label class="form-label" for="signupSimpleLoginEmail">Your email</label>
                            <input type="email" class="form-control form-control-lg" name="email" id="signupSimpleLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
                            <span class="invalid-feedback">Please enter a valid email address.</span>
                          </div>
                          <!-- End Form -->

                          <!-- Form -->
                          <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                              <label class="form-label" for="signupSimpleLoginPassword">Password</label>

                              <a class="form-label-link" href="../page-reset-password-simple.html">Forgot Password?</a>
                            </div>

                            <div class="input-group input-group-merge" data-hs-validation-validate-class>
                              <input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signupSimpleLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
                                    data-hs-toggle-password-options='{
                                     "target": "#changePassTarget",
                                     "defaultClass": "bi-eye-slash",
                                     "showClass": "bi-eye",
                                     "classChangeTarget": "#changePassIcon"
                                   }'>
                              <a id="changePassTarget" class="input-group-append input-group-text" href="javascript:;">
                                <i id="changePassIcon" class="bi-eye"></i>
                              </a>
                            </div>

                            <span class="invalid-feedback">Please enter a valid password.</span>
                          </div>
                          <!-- End Form -->

                          <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg">Log in</button>
                          </div>

                          <div class="text-center">
                            <p>Don't have an account yet? <a class="link" href="../page-signup-simple.html">Sign up here</a></p>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                    </div>
                    <!-- End Form -->

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.bs-validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF BOOTSTRAP VALIDATION
                        // =======================================================
                        HSBsValidation.init('.js-validate', {
                          onSubmit: data => {
                            data.event.preventDefault()
                            alert('Submited')
                          }
                        })

                        // INITIALIZATION OF TOGGLE PASSWORD
                        // =======================================================
                        new HSTogglePassword('.js-toggle-password')
                      })()
                    </script>

## Component #2

- Preview
- HTML
- JS

# Welcome to Front

Fill out the form to get started.

Your email Please enter a valid email address.
Password
Your password is invalid. Please try again.
Confirm password
Password does not match the confirm password.
By submitting this form I have read and acknowledged the Privacy Policy Please accept our Privacy Policy.

Already have an account? Log in here

                    <!-- Form -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="flex-grow-1 mx-auto" style="max-width: 28rem;">
                        <!-- Heading -->
                        <div class="text-center mb-5 mb-md-7">
                          <h1 class="h2">Welcome to Front</h1>
                          <p>Fill out the form to get started.</p>
                        </div>
                        <!-- End Heading -->

                        <!-- Form -->
                        <form class="js-validate needs-validation" novalidate>
                          <!-- Form -->
                          <div class="mb-3">
                            <label class="form-label" for="signupSimpleSignupEmail">Your email</label>
                            <input type="email" class="form-control form-control-lg" name="email" id="signupSimpleSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
                            <span class="invalid-feedback">Please enter a valid email address.</span>
                          </div>
                          <!-- End Form -->

                          <!-- Form -->
                          <div class="mb-3">
                            <label class="form-label" for="signupSimpleSignupPassword">Password</label>

                            <div class="input-group input-group-merge" data-hs-validation-validate-class>
                              <input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signupSimpleSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
                                      data-hs-toggle-password-options='{
                                         "target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
                                         "defaultClass": "bi-eye-slash",
                                         "showClass": "bi-eye",
                                         "classChangeTarget": ".js-toggle-passowrd-show-icon-1"
                                       }'>
                              <a class="js-toggle-password-target-1 input-group-append input-group-text" href="javascript:;">
                                <i class="js-toggle-passowrd-show-icon-1 bi-eye"></i>
                              </a>
                            </div>

                            <span class="invalid-feedback">Your password is invalid. Please try again.</span>
                          </div>
                          <!-- End Form -->

                          <!-- Form -->
                          <div class="mb-3">
                            <label class="form-label" for="signupSimpleSignupConfirmPassword">Confirm password</label>

                            <div class="input-group input-group-merge" data-hs-validation-validate-class>
                              <input type="password" class="js-toggle-password form-control form-control-lg" name="confirmPassword" id="signupSimpleSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
                                     data-hs-validation-equal-field="#signupSimpleSignupPassword"
                                      data-hs-toggle-password-options='{
                                       "target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
                                       "defaultClass": "bi-eye-slash",
                                       "showClass": "bi-eye",
                                       "classChangeTarget": ".js-toggle-passowrd-show-icon-2"
                                     }'>
                               <a class="js-toggle-password-target-2 input-group-append input-group-text" href="javascript:;">
                                <i class="js-toggle-passowrd-show-icon-2 bi-eye"></i>
                              </a>
                            </div>

                            <span class="invalid-feedback">Password does not match the confirm password.</span>
                          </div>
                          <!-- End Form -->

                          <!-- Check -->
                          <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="signupHeroFormPrivacyCheckEg1" name="signupFormPrivacyCheck" required>
                            <label class="form-check-label small" for="signupHeroFormPrivacyCheckEg1"> By submitting this form I have read and acknowledged the <a href=../page-privacy.html>Privacy Policy</a></label>
                            <span class="invalid-feedback">Please accept our Privacy Policy.</span>
                          </div>
                          <!-- End Check -->

                          <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg">Sign up</button>
                          </div>

                          <div class="text-center">
                            <p>Already have an account? <a class="link" href="../page-login-simple.html">Log in here</a></p>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                    </div>
                    <!-- End Form -->

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.bs-validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF BOOTSTRAP VALIDATION
                        // =======================================================
                        HSBsValidation.init('.js-validate', {
                          onSubmit: data => {
                            data.event.preventDefault()
                            alert('Submited')
                          }
                        })

                        // INITIALIZATION OF TOGGLE PASSWORD
                        // =======================================================
                        new HSTogglePassword('.js-toggle-password')
                      })()
                    </script>

## Component #4

- Preview
- HTML

# Forgot password?

Enter your email address below and we'll get you back on track.

Your email Back to Log in
Please enter a valid email address.

                    <!-- Form -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="flex-grow-1 mx-auto" style="max-width: 28rem;">
                        <!-- Heading -->
                        <div class="text-center mb-5 mb-md-7">
                          <h1 class="h2">Forgot password?</h1>
                          <p>Enter your email address below and we'll get you back on track.</p>
                        </div>
                        <!-- End Heading -->

                        <!-- Form -->
                        <form class="js-validate needs-validation" novalidate>
                          <!-- Form -->
                          <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                              <label class="form-label" for="signupSimpleResetPasswordEmail" tabindex="0">Your email</label>

                              <a class="form-label-link" href="../page-login-simple.html">
                                <i class="bi-chevron-left small ms-1"></i> Back to Log in
                              </a>
                            </div>

                            <input type="email" class="form-control form-control-lg" name="email" id="signupSimpleResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
                            <span class="invalid-feedback">Please enter a valid email address.</span>
                          </div>
                          <!-- End Form -->

                          <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                    </div>
                    <!-- End Form -->

## Component #5

- Preview
- HTML

## Thousands of experts around the world ready to help you.

See why leading organizations choose Front Course for Business as their destination for employee learning.

#### Learn more about:

- Unlimited access to the top 3,500+ courses
- Fresh content taught by 1,300+ experts – for any learning style
- Actionable learning insights Beta

#### Try it free for 7 days starting at $59

First name Please enter your first name
Last name Please enter your last name
Email address Please enter your email address
Password Your password must include 8+ characters
Confirm password Password does not match the confirm password
By submitting this form I have read and acknowledged the Privacy Policy Please accept our Privacy Policy.

Already have an account? Log In

                    <!-- Signup Form -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="row justify-content-lg-between align-items-md-center">
                        <div class="col-md-5 mb-7 mb-md-0">
                          <div class="mb-5">
                            <h2>Thousands of experts around the world ready to help you.</h2>
                            <p>See why leading organizations choose Front Course for Business as their destination for employee learning.</p>
                          </div>

                          <h4>Learn more about:</h4>

                          <!-- List Checked -->
                          <ul class="list-checked list-checked-primary">
                            <li class="list-checked-item">Unlimited access to the top 3,500+ courses</li>
                            <li class="list-checked-item">Fresh content taught by 1,300+ experts – for any learning style</li>
                            <li class="list-checked-item">Actionable learning insights <span class="badge bg-warning text-dark rounded-pill ms-1">Beta</span></li>
                          </ul>
                          <!-- End List Checked -->
                        </div>
                        <!-- End Col -->

                        <div class="col-md-7 col-lg-6">
                          <!-- Form -->
                          <form class="js-validate needs-validation" novalidate>
                            <!-- Card -->
                            <div class="card">
                              <div class="card-header bg-primary text-center">
                                <h4 class="card-header-title text-white">Try it free for 7 days <span class="badge bg-warning text-dark rounded-pill ms-1">starting at $59</span></h4>
                              </div>

                              <div class="card-body">
                                <div class="row gx-3">
                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4">
                                      <label class="form-label" for="signupHeroFormFirstName">First name</label>
                                      <input type="text" class="form-control form-control-lg" name="signupHeroFormNameFirstName" id="signupHeroFormFirstName" placeholder="First name" aria-label="First name" required>
                                      <span class="invalid-feedback">Please enter your first name</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4">
                                      <label class="form-label" for="signupHeroFormLasttName">Last name</label>
                                      <input type="text" class="form-control form-control-lg" name="signupHeroFormNameLastName" id="signupHeroFormLasttName" placeholder="Last name" aria-label="Last name" required>
                                      <span class="invalid-feedback">Please enter your last name</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>
                                  <!-- End Col -->
                                </div>
                                <!-- End Row -->

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signupHeroFormWorkEmail">Email address</label>
                                  <input type="email" class="form-control form-control-lg" name="signupHeroFormNameWorkEmail" id="signupHeroFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com" required>
                                  <span class="invalid-feedback">Please enter your email address</span>
                                </div>
                                <!-- End Form -->

                                <div class="row gx-3">
                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4">
                                      <label class="form-label" for="signupHeroFormSignupPassword">Password</label>
                                      <input type="password" class="form-control form-control-lg" name="password" id="signupHeroFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
                                      <span class="invalid-feedback">Your password must include 8+ characters</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4" data-hs-validation-validate-class>
                                      <label class="form-label" for="signupHeroFormSignupConfirmPassword">Confirm password</label>
                                      <input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupHeroFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
                                             data-hs-validation-equal-field="#signupHeroFormSignupPassword">
                                      <span class="invalid-feedback">Password does not match the confirm password</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>
                                  <!-- End Col -->
                                </div>
                                <!-- End Row -->

                                <!-- Check -->
                                <div class="form-check mb-4">
                                  <input type="checkbox" class="form-check-input" id="signupHeroFormPrivacyCheckEg2" name="signupFormPrivacyCheck" required>
                                  <label class="form-check-label small" for="signupHeroFormPrivacyCheckEg2"> By submitting this form I have read and acknowledged the <a href=../page-privacy.html>Privacy Policy</a></label>
                                  <span class="invalid-feedback">Please accept our Privacy Policy.</span>
                                </div>
                                <!-- End Check -->

                                <div class="row align-items-center">
                                  <div class="col-sm-7 mb-3 mb-sm-0">
                                    <p class="card-text small">Already have an account? <a class="link" href="../page-login.html">Log In</a></p>
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-sm-5 text-sm-end">
                                    <button type="submit" class="btn btn-primary btn-lg">Sign up now</button>
                                  </div>
                                  <!-- End Col -->
                                </div>
                                <!-- End Row -->
                              </div>
                            </div>
                            <!-- End Card -->
                          </form>
                          <!-- End Form -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Signup Form -->