最后实现结果如下图所示：
如果输入的用户名或密码为空，则会弹出对话框提示
同样的，如果输入的密码不正确也会弹出对话框提示：
登录成功页面：
具体实现代码如下：
HTML代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登陆</title><link rel="icon" href="img/denglu-img/loginIcon.png"><link rel="stylesheet" href="CSS/denglu-css.css"><script src="JS/jquery-1.11.0.min.js"></script><link rel="stylesheet" href="CSS/bootstrap.min.css"><script src="JS/bootstrap.min.js"></script></head><body><div id="box" style="background: url('img/loginBackground.jpg');position:fixed;background-repeat: no-repeat;position:fixed;top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-index:-10;zoom: 1;background-color: #fff;background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;"></div><form action="login.php" method="post"><div class="login"><div class="login_container"><div class="login_titles">登录</div><div class="login_user"><img src="img/denglu-img/user.png"><input name="fusername" id="user" type="text" placeholder="请输入用户名" style="width: 300px;"></div><div class="login_pwd login_user"><img src="img/denglu-img/pwd.png"><input name="fuserpassword" id="pwd" type="text" placeholder="请输入密码" style="width: 300px;"></div><!-- 记住密码 --><div class="login_remenber"><input id="remenber_pwd" type="checkbox" value="1" name="remember" checked> 记住密码<span class="forgetpsd" style="float: right;"><a href="forget.php"style="color:#fff;">忘记密码？</a></span></div><div><p><span class="login_submit"><button>登陆</button></span><span class="zhuce"><!-- <a href="zhuce.php"><input type="button" value="注册"></a> --><a href="zhuce.php"><input type="button" value="注册"style=" width: 100px;opacity: 0.8;text-align: center;color:black;font-size: 16px;margin: 10px 20px;"></a></span></p></div></div></div></form></body></html>
css代码：
*{margin: 0;padding: 0;}.login{position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);}.login_title{text-align: center;margin: 10px 0;font-size: 30px;color: white;font-family: "华文行楷";}.login_container{padding: 20px 30px;background: rgba(0,0,0,0.3);}.login_titles{margin-bottom: 10px;text-align: center;font-size: 16px;color: #eee;}.login_user{position: relative;margin: 20px 0;}.login_user img{position: absolute;height: 20px;top: 50%;left: 8px;transform: translateY(-50%);}.login_user input{outline: none;border: none;padding: 7px 0px 7px 35px;width: 300px;font-family: "Microsoft soft";font-size: 14px;opacity: 0.4;}.login_remenber{font-family: "Microsoft soft";font-size: 14px;color: #eee;}.login_submit button{width: 100px;opacity: 0.8;text-align: center;color:black;font-size: 16px;margin: 10px 20px;}.zhuce{width: 100px;opacity: 0.8;text-align: center;color:black;font-size: 16px;margin: 10px 20px;}.login_message div{background: red;opacity: 0.8;text-align: center;color: white;font-size: 16px;height: 30px;line-height: 30px;margin: 10px 0;display: none;transition: 2s;}.login_message{-webkit-animation: login_message 2s linear;-moz-animation: login_message 2s linear;animation:login_message 2s linear;}
PHP连接数据库：
<?php// 连接到数据库$servername = "localhost";$serverusername = "root";$serverpassword = "123456";$dbname = "mybs";// 创建连接$conn = new mysqli($servername, $serverusername, $serverpassword, $dbname);// 检测连接// if ($conn->connect_error) {//die("连接失败: " . $conn->connect_error);// } else {//echo "连接成功";// }// 验证表单 登录信息//判断用户名和密码是否为空$fusername = isset($_POST['fusername']) ? $_POST['fusername'] : "";$fuserpassword = isset($_POST['fuserpassword']) ? $_POST['fuserpassword'] : "";$remember = isset($_POST['remember']) ? $_POST['remember'] : "";// $fusername = $_POST["fusername"];// $fuserpassword = $_POST["fuserpassword"];// echo $fusername, $fuserpassword;if (!empty($fusername) && !empty($fuserpassword)) { //建立连接$sql = "SELECT username,userpassword FROM `users` WHERE username = '$fusername' and userpassword = '$fuserpassword'";$result = $conn->query($sql);$row = mysqli_fetch_array($result); //判断用户名或密码是否正确if ($fusername == $row['username'] && $fuserpassword == $row['userpassword']) {// 创建cookie// 过期时间被设置为一个月（60 秒 * 60 分 * 24 小时 * 30 天）$expire = time() + 60 * 60 * 24 * 30;setcookie("fusername1", $fusername, $expire);setcookie("fuserpassword1", $fuserpassword, $expire);//关闭数据库,可进行页面跳转 这里为了方便 仅显示为登录成功// header("Location:personcenter.html");echo "登录成功！";mysqli_close($conn);} else {//用户名或密码错误，赋值err为1echo "<script>alert('用户名或密码错误，请重新输入！');location.href='denglu.html';</script>";}} else {//用户名或密码为空，赋值err为2echo "<script>alert('用户名或密码不能为空，请重新输入！');location.href='denglu.html'</script>";}
所建数据库如下：
这样我们简单的登录页面就做好了，通过form表单传递表单信息，一定要与input的name属性相匹配才能成功。这里所创建的cookie便于用户登录后，向多个页面传递用户信息。如：在另一个页面中 $fusername = $_COOKIE["fusername1"]; 来接受cookie所传递的值
