You can copy the source code and run it yourself:
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>登录页面实例展示</title> <link rel="stylesheet" type="text/css" href="/phpMyAdmin/login.css"/> </head> <body> <div> <img src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/> </div> <div class="mt70 w432 mar_auto re min_h400"> <form name="form1" id="form1" method="post" action="login.php"> <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" autocomplete="off" name="username" id="_username" tabindex="1"/></p> <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p> <p> <span> <input type="text" name="code" id="code" class="pf_ipt_verify w230" placeholder="验证码" autocomplete="off" tabindex="3"/> <img src="/phpMyAdmin/code.php" onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand"> </span> </p> <!--<p><a href="javascript:void(0)" class="btn_1 w430">登录</a></p> --> <p> <button class="btn_1 w430">登录</button> </p> <p><a href="regedit.html">账号注册</a></p> </form> </div> </body> </html>
login.css
.mar_auto {
margin-right: auto;
margin-left: auto;
}
.re {
position: relative;
}
.mt70 {
margin-top: 70px;
}
.min_h400 {
min-height: 400px;
}
.w432 {
width: 432px;
}
.btn_1 {
display: inline-block;
line-height: 16px;
padding: 15px 0;
margin-bottom: 30px;
border-radius: 3px;
font-family: Microsoft YaHei,SimHei;
background: #03a9f4;
border: 1px solid #0398db;
color: #fff;
font-size: 20px;
text-align: center;
cursor: pointer;
}
.w430 {
width: 430px;
}
.pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{
height: 20px;
line-height: 20px;
padding: 13px 20px;
margin-bottom: 30px;
width: 390px;
border: 1px solid #d9d9d9;
border-radius: 3px;
color: #888;
font-size: 16px;
font-family: Microsoft YaHei,SimHei;
}
.w230{
width: 230px;
}login.php
<?php
session_start();
header("content-type:text/html;charset=utf-8");
//连接数据库
$link = mysqli_connect("localhost","root","root","regedit");
if (!$link) {
die("连接失败: " . mysqli_connect_error());
}
if(isset($_POST)){
//用户名不能为空
if(!$_POST['username']){
echo('用户名不能为空');
return;
}
//密码不能为空
if(!$_POST['password']){
echo('密码不能为空');
return;
}
//判断验证码是否填写并且是否正确
if(!$_POST['code']){
echo('验证码不能为空');
return;
}else if($_POST['code']!=$_SESSION['VCODE']){
echo('验证码不正确');
return;
}
$sql="select username,password from form where username = '{$_POST['username']}' and password='{$_POST['password']}'";
$rs=mysqli_query($link,$sql); //执行sql查询
$row=mysqli_fetch_assoc($rs);
if($row) { // 用户存在；
if ($username == $row['username'] && $pwd == $row['password']) { //对密码进行判断。
echo "登陆成功，正在为你跳转至后台页面";
//header("location:index.php");
}
}else{
echo "账号或密码错误" . "<br/>";
echo "<a href='login.html'>返回登陆页面</a>";
}
}
?>regedit .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>注册页面</title> <link rel="stylesheet" type="text/css" href="/phpMyAdmin/login.css"/> </head> <body> <div> <img src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/> </div> <div class="mt70 w432 mar_auto re min_h400"> <form name="form1" id="form1" method="post" action="regedit.php"> <p><input type="text" class="pf_ipt_user" placeholder="请输入账号" autocomplete="off" name="username" id="_username" tabindex="1"/></p> <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p> <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请再输入一次" autocomplete="off" name="pwd_again" id="_password1" tabindex="3"/></p> <p> <button class="btn_1 w430">注册</button> </p> </form> </div> </body> </html>
regedit.php
<?php
header("content-type:text/html;charset=utf-8");
//连接数据库
$link = mysqli_connect("localhost","root","root","regedit");
if (!$link) {
die("连接失败: " . mysqli_connect_error());
}
$username=$_POST['username'];
$password=$_POST['password'];
$pwd_again=$_POST['pwd_again'];
if($username == "" || $password == "" || $pwd_again == "")
{
echo "请确认信息完整性";
}else{
if($password!=$pwd_again)
{
echo"两次输入的密码不一致,请重新输入！"."<br/><br/>";
echo"<a href='regedit.html'>重新输入</a>";
}
else
{
$sql="insert into form(username,password) values('$username','$password')";
$result=mysqli_query($link,$sql);
if(!$result)
{
echo"注册不成功！"."<br/><br/>";
echo"<a href='regedit.html'>返回</a>";
}
else
{
echo"注册成功!"."<br/><br/>";
echo"<a href='login.html'>立刻登录</a>";
}
}
}
?>code.php
<?php
session_start();
Header("Content-type:image/PNG");
$im = imagecreate(150,45);
$back = imagecolorallocate($im, 245, 245, 245);
imagefill($im, 0,0, $back);
$vcodes = "";
for($i = 0; $i < 4; $i++){
$font = imagecolorallocate($im, rand(100, 255), rand(0, 100), rand(100, 255));
$authnum = rand(0, 9);
$vcodes .= $authnum;
imagestring($im, 5, 50 + $i * 10, 20, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<200;$i++) {
$randcolor = imagecolorallocate($im, rand(0, 255), rand(0, 255), rand(0, 255));
imagesetpixel($im, rand()%150, rand()%150, $randcolor); //
}
imagepng($im);
imagedestroy($im);
?>