后端(PHP)、前端(HTML、BootStrap框架和JavaScript)
1、登录注册文件存放位置展示;
2、登录注册源代码展示。
3、使用说明。
使用说明:
先新建一个view文件夹,在view文件里面建立两个.html文件,
分别命名为:
login.html和register.html,
再新建一个css文件夹里面有login.css和register.css
下图是文件分布图:
1、前端登录页面 login.html里的 代码如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/login.css">
<title>用户登录</title>
</head>
<style>
.col-md-12{
margin: 5px;
padding: 5px;
}
</style>
<body>
<div class="inputbg" alt="背景">
<div class="container mt-3">
<h2 style="text-align: center;color: #0d6efd;">登录</h2>
<hr>
<form action="./common/login_test.php" method="post">
<div alt="定位"
style="margin: 0;
position: absolute;
top: 50%;
left: 50%;
width: 66%;
height: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);">
<div class="col-md-12">
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">用户</span>
<input type="text" class="form-control" autocomplete="off" placeholder="用户名" name="name">
<div class="invalid-feedback">
</div>
</div>
</div>
<div class="col-md-12">
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">密码</span>
<input type="password" class="form-control" placeholder="密码" name="pswd">
<div class="invalid-feedback">
</div>
</div>
</div>
<div class="col-md-12">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember">记住 密码
</label>
</div>
<div class="col-md-12">
<div class="input-group has-validation">
<input type="text" class="form-control" placeholder="验证码" name="input_code">
<span class="input-group-text" id="inputGroupPrepend" >
<img id="captcha_img"
src='./captcha.php?r=<?php echo rand(); ?>'
style="width:100px; height:30px;border-radius: 11px;"
onclick="document.getElementById('captcha_img').src='./captcha.php?r='+Math.random()"
/>
<!--文本验证码 <input value="<?php echo $code; ?>" style="
background: none;
border: none;
outline: none;
width: 45px;
height: auto;
" type="text" name="user_code" >--></span>
<div class="invalid-feedback">
</div>
</div>
</div>
<div class="col-md-12">
<a href="./view/register.html" class="btn btn-primary">注册</a>
<button type="reset" class="btn btn-primary">重置</button>
<button type="submit" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
1.1、login.css代码如下:
body{
display: flex;
background-image: url(../image/bg.png);/*添加自己图片*/
background-color: #b8e5f8;
background-size: cover;
width: 100%;
height: 100%;
}
.inputbg{
background-color: #fff;
width: 500px;
height: 400px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 20px;
}
.input-float{
position: absolute;
left: 38%;
bottom: 20%;
}
2、前端注册页面 register.html里的 代码如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/register.css">
<title>注册</title>
</head>
<body>
<div class="inputbg" id="myform">
<div class="container mt-3">
<h2 style="text-align: center;color: #0d6efd;">注册</h2>
<form action="../common/add_user.php" method="post">
<div class="mb-3 mt-3">
<label class="form-label" >请输入用户名:</label>
<input type="text" autocomplete="off" class="form-control" placeholder="用户名/手机号" name="name">
</div>
<div class="mb-3">
<label class="form-label">请输入密码:</label>
<input type="password" class="form-control" id="st3" placeholder="密码" name="pswd">
</div>
<div class="mb-3">
<label class="form-label">再次输入密码:</label>
<input type="password" class="form-control" id="st4" onblur="check()" placeholder="密码" name="rpswd">
</div>
<a href="../index.php" class="btn btn-primary">已有账号?返回登录</a>
<button type="reset" class="btn btn-primary">重置</button>
<button type="submit" class="btn btn-primary">确认</button>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
function check(){
var boo=$('st3').value==$('st4').value;
if (boo) {
return true;
}else{
alert('两次密码不一致,请重新输入')
}
}
</script>
</html>
2.1、register.css代码如下:
body{
display: flex;
background-image: url(../image/5.png);/*添加自己图片*/
background-color: #b8e5f8;
background-size: cover;
width: 100%;
height: 100%;
}
.inputbg{
background-color: #fff;
width: 500px;
height: 400px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 20px;
}
后续会添加其他样式和功能,尽我所能完善用户要求。
欢迎各位大佬的到来,请多多指教。我是菜鸟,喜欢就好。