PHP登录注册页面展示及（源代码）

新人菜鸟请多多指教

已于 2024-01-14 20:34:16 修改

阅读量3.6k

点赞数 1

分类专栏： PHP 文章标签： php 前端 javascript css bootstrap

于 2022-12-31 14:50:27 首次发布

本文链接：https://blog.csdn.net/cx12xc/article/details/128505405

版权

PHP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

后端（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;
}

后续会添加其他样式和功能，尽我所能完善用户要求。

欢迎各位大佬的到来，请多多指教。我是菜鸟，喜欢就好。