Forms: Authentication
Component #1
Welcome back
Login to manage your account.
<!-- 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 protected]" aria-label="[email protected]" 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
Welcome to Front
Fill out the form to get started.
<!-- 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 protected]" aria-label="[email protected]" 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
Forgot password?
Enter your email address below and we'll get you back on track.
<!-- 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
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
<!-- 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 protected]" aria-label="[email protected]" 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 -->