Forms: Authentication
Component #1
Welcome back
登录 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">你的邮箱</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">请输入有效的电子邮件地址.</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个字符以上的内容" aria-label="请输入至少8个字符以上的内容" 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">请输入有效的密码.</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 -->
<!-- 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">你的邮箱</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">请输入有效的电子邮件地址.</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个字符以上的内容" aria-label="请输入至少8个字符以上的内容" 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">您的密码无效。请再试一次。</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupSimpleSignupConfirmPassword">确认密码</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个字符以上的内容" aria-label="请输入至少8个字符以上的内容" 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"> 提交此表格后，我已阅读并确认 <a href=../page-privacy.html>隐私策略</a></label>
<span class="invalid-feedback">请接受我们的隐私政策。</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>已经有账户了? <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 -->
<!-- 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
忘记密码?
输入您的电子邮件地址 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">忘记密码?</h1>
<p>输入您的电子邮件地址 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">你的邮箱</label>
<a class="form-label-link" href="../page-login-simple.html">
<i class="bi-chevron-left small ms-1"></i> 返回登录页面
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="signupSimpleResetPasswordEmail" tabindex="1" placeholder="输入您的电子邮件地址" aria-label="输入您的电子邮件地址" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</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
世界各地数以千计的专家随时准备帮助您。
看看为什么领导组织选择商业前线课程作为员工学习的目的地。
了解更多 about:
- 无限访问顶级3500 +课程
- 新鲜的内容教授1300 +专家-为任何学习风格
- 可操作的学习观点 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>世界各地数以千计的专家随时准备帮助您。</h2>
<p>看看为什么领导组织选择商业前线课程作为员工学习的目的地。</p>
</div>
<h4>>了解更多 about:</h4>
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">无限访问顶级3500 +课程</li>
<li class="list-checked-item">新鲜的内容教授1300 +专家-为任何学习风格</li>
<li class="list-checked-item">可操作的学习观点 <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">免费试用7天 <span class="badge bg-warning text-dark rounded-pill ms-1">从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">名字</label>
<input type="text" class="form-control form-control-lg" name="signupHeroFormNameFirstName" id="signupHeroFormFirstName" placeholder="名字" aria-label="名字" required>
<span class="invalid-feedback">请输入您的名字
</span>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupHeroFormLasttName">姓氏</label>
<input type="text" class="form-control form-control-lg" name="signupHeroFormNameLastName" id="signupHeroFormLasttName" placeholder="姓氏" aria-label="姓氏" required>
<span class="invalid-feedback">请输入您的姓氏</span>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupHeroFormWorkEmail">邮箱地址</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">请输入您的电子邮件地址</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个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required>
<span class="invalid-feedback">您的密码必须包含8个以上的字符</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">确认密码</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupHeroFormSignupConfirmPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" 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"> 提交此表格后，我已阅读并确认 <a href=../page-privacy.html>隐私策略</a></label>
<span class="invalid-feedback">请接受我们的隐私政策。</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">已经有账户了? <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 -->