PHP登录注册页面

注册（html）

<!DOCTYPEhtml><html><head><title>注册</title><linkrel="stylesheet"href="register.css"><metaname="content-type";charset="UTF-8"><style>body{margin: 0;padding: 0;/*弹性布局 让页面元素垂直+水平居中*/display: flex;justify-content: center;align-items: center;/*让页面始终占浏览器可视区域总高度*/height: 100vh;position: absolute;flex-direction: column;background-color: red;flex: 1;width: 100%;height: 100%;background:url(WOW.jpg)  no-repeat;background-size:100% 100%;background-attachment:fixed;}.bigBox{margin: 0 auto;/* login框剧中 */margin-top: 0;/* login框与顶部的距离 */padding: 20px 50px;/* login框内部的距离(内部与输入框和按钮的距离) */background-color: #00000090;/* login框背景颜色和透明度 */width: 400px;height: 500px;border-radius: 10px;/* 圆角边 */text-align: center;/* 框内所有内容剧中 */}.bigBox h1{color: white;/* LOGIN字体颜色 */font-family:"Comic Sans MS";}.bigBox .loginButton{margin-right: 30px;margin-top: 20px;/* 按钮顶部与输入框的距离 */margin-bottom: 20px;width: 100px;height: 25px;color: white;/* 按钮字体颜色 */border: 0;/* 删除按钮边框 */border-radius: 20px;/* 按钮圆角边 */background-image:linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);/* 按钮颜色 */}.m-left{margin-left: 40px;}.m-plc{margin-right: 30px;margin-top: 30px;}.bigBox .login_box{/* 相对定位 */position: relative;width: 100%;}.bigBox .login_box input{/*清除input框自带的边框和轮廓*/outline: none;border: none;width: 100%;padding: 10px 0;margin-bottom: 30px;color: #fff;font-size: 16px;border-bottom: 1px solid #fff;/*背景颜色为透明色*/background-color: transparent;}.bigBox .login_box label{position:absolute;top: 0 ;left: 0;padding: 10px 0;color: #fff;/*这个属性的默认值是auto 默认是这个元素可以被点击
    但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用  
    可望而不可及*//*这个就是两者的区别*/pointer-events: none;/*加个过度*/transition: all 0.5s;}/*: focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器
    去找与input相邻的兄弟label*//*：valid 选择器是判断input 框的内容是否合法，如果合法会执行下面的属性代码，
    不合法就不会执行，我们刚开始写布局的时候给input框写了required 我们删掉看对比 
    当没有required的话   input框的值就会被认为一直合法，所以一直都是下方的样式，
    但是密码不会，密码框的值为空，那么这句话就不合法，required不能为空
    当我们给密码框写点东西的时候才会执行以下代码

*/.bigBox .login_box input:focus + label,
.bigBox  .login_box input:valid + label{top: -20px;color: #f509e1;font-size: 12px;}.b a{/*overflow: hidden;*/position: relative;padding: 5px 15px;color: #fff;/*取消a表现原有的下划线*/text-decoration: none;/*同样加个过渡*/transition: all 0.5s;}.b a:hover{color: #fff;border-radius: 15px;background-color: #c8f407;box-shadow: 0 0 5px #c8f407,0 0 25px #c8f407,0 0 50px #c8f407,0 0 100px #c8f407;}.b a span{position: absolute;}.b a span:first-child{top: 0;left: -100%;width: 100%;height: 2px;/*to right 就是往右边 下面的同理*/background:linear-gradient(to right,transparent,#c8f407);/*动画 名称  时长 linear是匀速运动 infinite是无限次运动*/animation: move1 1s linear infinite;}.b a span:nth-child(2){right: 0;top: -100%;width: 2px;height: 100%;background:linear-gradient(transparent,#c8f407);/*这里多了个0.25s其实是延迟时间*/animation: move2 1s linear 0.25s infinite;}.b a span:nth-child(3){right: -100%;bottom: 0;width: 100%;height: 2px;background:linear-gradient(to left,transparent,#c8f407);animation: move3 1s linear 0.5s infinite;}.b a span:last-child{left: 0;bottom: -100%;width: 2px;height: 100%;background:linear-gradient(#c8f407,transparent);animation: move4 1s linear 0.75s infinite;}/*写一下动画 */@keyframes move1{0%{left: -100%;}50%,
    100%{left: 100%;}}@keyframes move2{0%{top: -100%;}50%,
    100%{top: 100%;}}@keyframes move3{0%{right: -100%;}50%,
    100%{right: 100%;}}@keyframes move4{0%{bottom: -100%;}50%,
    100%{bottom: 100%;}}.m-left{margin-left: 30px;}</style></head><body><divclass="bigBox"><h1>注册页面</h1><formaction="注册2.php"method="post"><divclass="login_box"><inputtype="text"name='Username'id='Username'required/><labelfor="name">Username</label></div><divclass="login_box"><inputtype="password"name='Password'id='Password'required="required"><labelfor="pwd">Password</label></div><divclass="login_box"><inputtype="password"id="Re_Password"name="Re_Password"required="required"><labelfor="rpwd">Re_Password</label></div><divclass="login_box"><inputtype="password"id="Code"name="Code"size="4"required="required"><labelfor="yzm">Code</label><ahref="javascript:void(0)"onclick="document.getElementById('captcha_img').src='验证码.php?r='+Math.random()"><imgid="captcha_img"border='1'src='验证码.php?r=echo rand(); ?>'style="width:90px;height:30px"/></a></div><divstyle="color: white;font-size: 12px"><!--提示信息--></div><div><inputtype="submit"id="register"name="register"value="注册"class="loginButton m-left"><inputtype="reset"id="reset"name="reset"value="重置"class="loginButton"></div><divclass="b"><ahref="登录1.php">
                已有账号，去登录
                <span></span><span></span><span></span><span></span></a></form></div></body></html>

注册（php）

<?phpheader("Content-type:text/html;charset=utf-8");$link=mysqli_connect('localhost','root','');mysqli_set_charset($link,'utf8');//设定字符集mysqli_select_db($link,'login');$name=$_POST['Username'];$pwd=$_POST['Password'];$rpwd=$_POST['Re_Password'];$code=$_POST['Code'];if(!$link){die("连接失败: ".mysqli_connect_error());}elseif(strlen($pwd)<5||strlen($pwd)>10){echo"<script>alert('你的密码需要5~10位');window.location.href='注册1.php'</script>";exit;}elseif($rpwd!=$pwd){echo"<script>alert('你输入的两次密码不一致，请重新输入');window.location.href='注册1.php'</script>";exit;}else{$sql="insert into user(name, password)values('$name','$pwd')";}// 调用mysqli的query方法if(!(mysqli_query($link,$sql))){echo"<script>alert('注册失败');window.location.href='注册1.php'</script>";}else{echo"<script>alert('注册成功');window.location.href='登录1.php'</script>";}?>```<?php
header("Content-type:text/html;charset=utf-8");$link=mysqli_connect('localhost','root','');mysqli_set_charset($link,'utf8');//设定字符集mysqli_select_db($link,'login');$name=$_POST['Username'];$pwd=$_POST['Password'];$rpwd=$_POST['Re_Password'];$code=$_POST['Code'];if(!$link){die("连接失败: ".mysqli_connect_error());}elseif(strlen($pwd)<5||strlen($pwd)>10){echo"<script>alert('你的密码需要5~10位');window.location.href='注册1.php'</script>";exit;}elseif($rpwd!=$pwd){echo"<script>alert('你输入的两次密码不一致，请重新输入');window.location.href='注册1.php'</script>";exit;}else{$sql="insert into user(name, password)values('$name','$pwd')";}// 调用mysqli的query方法if(!(mysqli_query($link,$sql))){echo"<script>alert('注册失败');window.location.href='注册1.php'</script>";}else{echo"<script>alert('注册成功');window.location.href='登录1.php'</script>";}?>

登录（html）

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>用户登录</title><linkrel="stylesheet"href="index_log.css"/><style>*{/*初始化 清除页面元素的内外边距*/padding: 0;margin: 0;/*盒子模型*/box-sizing: border-box;}body{/*弹性布局 让页面元素垂直+水平居中*/display: flex;justify-content: center;align-items: center;/*让页面始终占浏览器可视区域总高度*/height: 100vh;position: absolute;flex-direction: column;background-color: red;flex: 1;width: 100%;height: 100%;background:url(WOW.jpg)  no-repeat;background-size:100% 100%;background-attachment:fixed;}.login{margin: 0 auto;/* login框剧中 */margin-top: 0;/* login框与顶部的距离 */padding: 20px 50px;/* login框内部的距离(内部与输入框和按钮的距离) */background-color: #00000090;/* login框背景颜色和透明度 */width: 400px;height: 350px;border-radius: 10px;/* 圆角边 */text-align: center;/* 框内所有内容剧中 */box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);}.login h1{color: #fff;margin-bottom: 30px;}.login .login_box{/*相对定位*/position: relative;width: 100%;}.login .login_box input{/*清除input框自带的边框和轮廓*/outline: none;border: none;width: 100%;padding: 10px 0;margin-bottom: 30px;color: #ffffff;font-size: 16px;border-bottom: 1px solid #fff;/*背景颜色为透明色*/background-color: transparent;}.login .login_box label{position:absolute;top: 0 ;left: 0;padding: 10px 0;color: #fff;/*这个属性的默认值是auto 默认是这个元素可以被点击
    但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用  
    可望而不可及*//*这个就是两者的区别*/pointer-events: none;/*加个过度*/transition: all 0.5s;}/*: focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器
    去找与input相邻的兄弟label*//*：valid 选择器是判断input 框的内容是否合法，如果合法会执行下面的属性代码，
    不合法就不会执行，我们刚开始写布局的时候给input框写了required 我们删掉看对比 
    当没有required的话   input框的值就会被认为一直合法，所以一直都是下方的样式，
    但是密码不会，密码框的值为空，那么这句话就不合法，required不能为空
    当我们给密码框写点东西的时候才会执行以下代码

*/.login .login_box input:focus + label,
.login  .login_box input:valid + label{top: -20px;color: #f509e1;font-size: 12px;}.b a{/*overflow: hidden;*/position: relative;padding: 5px 15px;color: #fff;/*取消a表现原有的下划线*/text-decoration: none;/*同样加个过渡*/transition: all 0.5s;}.b a:hover{color: #fff;border-radius: 15px;background-color: #c8f407;box-shadow: 0 0 5px #c8f407,0 0 25px #c8f407,0 0 50px #c8f407,0 0 100px #c8f407;}.b a span{position: absolute;}.b a span:first-child{top: 0;left: -100%;width: 100%;height: 2px;/*to right 就是往右边 下面的同理*/background:linear-gradient(to right,transparent,#c8f407);/*动画 名称  时长 linear是匀速运动 infinite是无限次运动*/animation: move1 1s linear infinite;}.b a span:nth-child(2){right: 0;top: -100%;width: 2px;height: 100%;background:linear-gradient(transparent,#c8f407);/*这里多了个0.25s其实是延迟时间*/animation: move2 1s linear 0.25s infinite;}.b a span:nth-child(3){right: -100%;bottom: 0;width: 100%;height: 2px;background:linear-gradient(to left,transparent,#c8f407);animation: move3 1s linear 0.5s infinite;}.b a span:last-child{left: 0;bottom: -100%;width: 2px;height: 100%;background:linear-gradient(#c8f407,transparent);animation: move4 1s linear 0.75s infinite;}/*写一下动画 */@keyframes move1{0%{left: -100%;}50%,
    100%{left: 100%;}}@keyframes move2{0%{top: -100%;}50%,
    100%{top: 100%;}}@keyframes move3{0%{right: -100%;}50%,
    100%{right: 100%;}}@keyframes move4{0%{bottom: -100%;}50%,
    100%{bottom: 100%;}}.m-left{margin-left: 30px;}.loginButton{line-height: 25px;/*设置line-height与rongqi的height相等*/text-align: center;margin-right: 30px;margin-top: 10px;/* 按钮顶部与输入框的距离 */margin-bottom: 30px;width: 100px;height: 25px;color: white;/* 按钮字体颜色 */border: 0;/* 删除按钮边框 */border-radius: 20px;/* 按钮圆角边 */background-image:linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);/* 按钮颜色 */}.register{position: absolute;right: 10px;color: #ffffff;/*left:  calc(5% - 200px);*//* bottom: 200px; */font-size: 13px;margin-bottom: 10px;}.c{background-color: #00000090;color: #fff;box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);}.b{margin-bottom: 20px;}</style></head><body><divclass="login"><h1>用户登录</h1><formaction="登陆2.php"method="post"><divclass="login_box"><inputtype="text"name='Username'id='Username'required/><labelfor="Username">Username</label></div><divclass="login_box"><inputtype="password"name='Password'id='Password'required="required"><labelfor="Password">Password</label></div><divclass="b"><ahref="注册1.php">
                注册账号
                <span></span><span></span><span></span><span></span></a></div><divclass="regiter"><ahref="注册1.php"><inputtype="submit"id="regiter"name="login"value="登录"class="loginButton m-left"></a></div></div></body></html>

登录（php）

<?phpheader("Content-type:text/html;charset=utf-8");$link=mysqli_connect('localhost','root','');mysqli_set_charset($link,'utf8');//设定字符集mysqli_select_db($link,'login');$name=$_POST['Username'];$pwd=$_POST['Password'];if(!$link){die("连接失败: ".mysqli_connect_error());}//在数据库中查看是否存在用户名及密码$sql="select name,password from user where name='$name' and password='$pwd'";$result=mysqli_query($link,$sql);$row=mysqli_fetch_array($result,MYSQLI_BOTH);$number=mysqli_num_rows($result);if($number){echo"<script>alert('登录成功');location='登录1.php'</script>";}else{echo"<script>alert('您输入的用户名不存在');location='登录1.php'</script>";exit;}?>

验证码(php)

<?phpini_set('display_errors','off');//11>设置session,必须处于脚本最顶部session_start();$image=imagecreatetruecolor(100,30);//1>设置验证码图片大小的函数//5>设置验证码颜色 imagecolorallocate(int im, int red, int green, int blue);$bgcolor=imagecolorallocate($image,255,255,255);//#ffffff//6>区域填充 int imagefill(int im, int x, int y, int col) (x,y) 所在的区域着色,col 表示欲涂上的颜色imagefill($image,0,0,$bgcolor);//10>设置变量$captcha_code="";//7>生成随机的字母和数字for($i=0;$i<4;$i++){//设置字体大小$fontsize=8;//设置字体颜色，随机颜色$fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//0-120深颜色//设置需要随机取的值,去掉容易出错的值如0和o$data='abcdefghigkmnpqrstuvwxy3456789';//取出值，字符串截取方法  strlen获取字符串长度$fontcontent=substr($data,rand(0,strlen($data)),1);//10>.=连续定义变量$captcha_code.=$fontcontent;//设置坐标$x=($i*100/4)+rand(5,10);$y=rand(5,10);imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);}//10>存到session$_SESSION['authcode']=$captcha_code;//8>增加干扰元素，设置雪花点for($i=0;$i<200;$i++){//设置点的颜色，50-200颜色比数字浅，不干扰阅读$pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));//imagesetpixel — 画一个单一像素imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);}//9>增加干扰元素，设置横线for($i=0;$i<4;$i++){//设置线的颜色$linecolor=imagecolorallocate($image,rand(80,220),rand(80,220),rand(80,220));//设置线，两点一线imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);}//2>设置头部，image/pngheader('Content-Type: image/jpeg');//3>imagepng() 建立png图形函数imagepng($image);//4>imagedestroy() 结束图形函数 销毁$imageimagedestroy($image);?>

注册页面
在这里插入图片描述
点击高亮

登录页面

数据库