1.アイデア
（1）登録ページのスタイルはログインページと同じです
（2）登録インターフェイスとログインインターフェイスはhtmlファイルに配置され、jqeruyを使用して切り替えます
2.ログインインターフェースに基づいて変更する
https://www.cnblogs.com/YorkZhangYang/p/12538576.html
3. jQueryでのタブ切り替えの例
https://www.cnblogs.com/YorkZhangYang/p/12674859.html
4.上記のポイント3の例に従って、ログインページを変更します。
（1）ページ構成
（2）ログインフォームをコピーして変更して登録し、テキストボックスをいくつか追加します。
（3）CSSスタイルを変更する
（4）jQueryスタイルの切り替えコードを追加する
5.コードは次のとおりです
<！DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width、initial-scale = 1.0">
< title> 注釈登録登界面
</ title>
<！-ブートストラップ->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "js / jquery-3.4.1.js"> </ script>
<style>
.bg {
高さ：600px;
background -image：url（images / bg.jpg）;
背景サイズ：カバー;
}
。
form { background：rgba（ 240,240,240,0.2 ）;
マージン- 上：110px;
マージン-左：37％;
幅：378px;
}
.footer {
高さ：60px;
パディング - トップ：は50px;
フォント - サイズ：14px;
フォント - 太さ：太字;
テキスト -配置：中央;
明確：両方;
}
.title {
高さ：40px;
行 - 高さ：40px;
マージン - 下：10px;
背景 - 色：透明;
}
.row.titleスパン{
フォント -サイズ： 16px ;
色：＃ 494949 ;
フォント - 太さ：
太字; / * 横並びのブロックに変換* /
表示：インライン - ブロック;
テキスト -配置：中央;
/ * 左と右の塗りつぶし* /
/ * パディング：0 68px * /
幅： 49％;
}
span.tab_active {
color：white！important;
background - color：＃52ad61;
border - bottom：2px solid #fff;
}
.formcontent
{
パディング：20px 10px;
}
</ style>
</ head>
<body>
<div class = "page-header">
<h1> XXXX信息系统登录注録界面</ h1>
</ div>
<div class = "container-fluid">
< div class = "row bg">
<div class = "col-md-4 form">
<div class = "row title">
<span class = "tab_active">登記＆nbsp;＆nbsp;＆nbsp;＆nbsp;录</ span>
<span style = "float：right;">注＆nbsp;＆nbsp;＆nbsp;＆nbsp; TUTORIAL </ span>
</ div>
<div class = "formcontent" = "username" class = "col-sm-4 control-label">使用户名</ label>
<div class = "col-sm-8">
<input type = " text "class =" form-control "id =" username "placeholder ="请输入用户名 "onblur =" validateusername（）; ">
</ div>
</ div>
<div class =" form-group ">
<ラベルのため = "パスワード"クラス= "COL-SM-4コントロールラベル">密码</ label>は
<DIV CLASS = "COL-SM-8">
の<input type = "パスワード"class = "form-control" id = "password" placeholder = "请输入密码">
</ div>
</ div>
<div class = "form-group">
<label for= "validateCode" class = "col-sm-4 control-label">验证码</ label>
<div class = "col-sm-4">
<input type = "text" class = "form-control "id =" validateCode "placeholder ="请输入验证码 ">
</ div>
<div class =" col-sm-4 ">
<img src =" images / yzm.jpg "alt =" "width =" 75px "height =" 35px ">
</ div>
</ div>
<div class =" form-group ">
<div class =" col-sm-offset-2 col-sm-10 ">
<div class = "checkbox">
<label>
<input type = "checkbox" name = "remember">记住我
</ label>
</ div>
</ div>
</ div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<ボタンtype = "button" id = "submitBtn" class = "btn btn-success" style = "width：50％;" >登录</ button>
</ div>
</ div>
</ form>
<！-ノートボックス->
<form class = "form-horizontal" id = "registerForm" action = "" style = "display：なし; ">
<div class = "col-sm-8">
<input type = "text" class = "form-control" id = "rusername"プレースホルダ= "请输入用户名"のonblur = "validateusername（）;">
</ div>
</ div>
<DIV CLASS = "フォームグループ">
<ラベルのため = "rpassword"クラス= "COL -sm-4 control-label ">密码</ label>
<div class =" col-sm-8 ">
<input type =" password "class =" form-control "id =" rpassword "placeholder = "请输入密码">
</ div>
</ div>
<div class = "form-group">
<ラベルについて= "rrpassword" class = "col-sm-4 control-label">确认密码</ label>
<div class = "col-sm-8">
<input type = "password" class = "form-control" id = "rrpassword"プレースホルダ= "请输入确认密码">
</ div>
</ div>
<DIV CLASS = "フォームグループ">
<ラベルのため = "remail"クラス= "COL-SM-4コントロールラベル" >邮箱</ label>
<div class = "col-sm-8">
<input type = "text" class = "form-control" id = "remail" placeholder = "请输入邮箱">
</ div>
</ div>
<div class = "form-group">
<ラベルの= "rtel" class = "col-sm-4 control-label">电话</ label>
<div class = "col-sm-8">
<input type = "text" class = "form-control" id = "rtel"プレースホルダ= "请输入电话">
</ div>
</ div>
<DIV CLASS = "フォームグループ">
<ラベルのため = "rvalidateCode"クラス= "COL-SM-4コントロールラベル">验证码</ label>
<div class = "col-sm-4">
<input type = "text" class = "form-control" id = "rvalidateCode" placeholder = "確認コードを入力してください ">
</ div>
<div class =" col-sm-4 ">
<img src = "images / yzm.jpg" alt = "" width = "75px" height = "35px">
</ div>
</ div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "button" id = "registerBtn" class = "btn btn -success "style =" width：50％; " >注録</ button>
</ div>
</ div>
</ form>
</ div>
<span style = "color：red;" id = "tip"> </ span>
</ div>
</ div>
<div class = "footer">
<p>＆copy;版权すべて：XXXXX学院XX市XX大道XXX号</ p>
</ div>
</ div>
<script> //
let username = document.getElementById（ "username" ）;
let password = document.getElementById（ "password" ）;
let validateCode = document.getElementById（ "validateCode" ）;
let span = document.getElementById（ "tip" ）;
let submitBtn = document.getElementById（ "submitBtn" ）;
console.log（validateCode）;
password.onblur = function （）
{
validatepassword（）;
}
validateCode.onblur = function （）
{
validatecode（）;
}
function validateusername（）
{
let value = username.value;
if（！value）
{
span.innerHTML = "username cannot be empty" ;
return false ;
}
else if（value.length <2 | | value.length> 11 ）
{
span.innerHTML = "Username length 2-12 bits" ;
return false ;
}
else {
span.innerHTML = "";
return true ;
}
}
function validatepassword（）
{
let value = password.value;
if（！value）
{
span.innerHTML = "password cannot be empty" ;
return false ;
}
else if（value.length <2 || value.length> 11 ）
{
span.innerHTML = "Password length 2-12 bits" ;
return false ;
}
else {
span.innerHTML = "" ;
trueを返し ます。
}
}
function validatecode（）
{
let value = validateCode.value;
if（！値）
{
span.innerHTML = "验证码不可能にな空" ;
falseを返し ます。
}
else {
span.innerHTML = "" ;
trueを返し ます。
}
}
submitBtn.onclick= function （）{
if（validateusername（）&& validatepassword（）&& validatecode（））
{
// document.getElementById（ "loginForm"）。submit（）;
strName = username.value;とします。
strPwd = $（ " ＃password " ）.val（）;
strCode = validateCode.value;
// 获取チェックボックス是否已选中
せchkbox = $（ "入力[名前= '覚えて']：チェックボックス"）。小道具（ "確認" ）;
console.log（strName）;
console.log（strPwd）;
console.log（strCode）;
console.log（chkbox）;
$ .ajax（{"$ {pageContext.request.contextPath} / LoginServlet"、// LoginTest / LoginServlet
type： "post" 、dataType
： "text" 、
data：{username：strName、password：strPwd、validatecode：strCode、chkbox：chkbox}、
beforeSend：function （）{
$（ "#tip"）。html（ "登录中......." ）;
}、
success：function（data）{ // 是Fromservlet传回来的
$（ " ＃tip "）。html（ "登录成功！" ）;
// window.location.url = "";
}、）;
}）;
}）
</ script>
<！-jQuery（BootstrapのすべてのJavaScriptプラグインはjQueryに依存するため、前に配置する必要があります）->
<script src = "https://cdn.jsdelivr.net/npm/[email protected] .4 / dist / jquery.min.js "> </スクリプト>
<！-BootstrapのすべてのJavaScriptプラグインをロードします。必要に応じて、単一のプラグインのみをロードすることもできます。->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </スクリプト>
</ body>
</ html>
6.効果チャート
7.問題
（1）ログインボックスを中央に配置できないdiv class = "col-md-4 form"ブロックの幅を設定した後、マージン：0 autoを中央に配置できません。
（2）登録済みのspan要素を少し残し、span style = "float：right;"の愚かな方法を使用して解決します。
（3）登録されたjs検証が行われず、jsコードが多く、それらを1つのファイルに抽出する必要があります。