PHP development login page HTML page
Let’s take a look at the picture below
##As you can see from the picture above, our login page uses three <input> tag input fields. A registration link <a>, a login now button <button> and a verification code constitute our login page. However, if we need our page to look better, css style is indispensable. The css style in this chapter As shown below
<style type="text/css">
body{background-image: url("/images/1.jpg")}
.container{
width: 380px;
height: 330px;
margin: 0 auto;margin-top: 240px;
box-shadow: 0 0 20px #222;
border-radius:40px;
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative;
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>Verification code
The verification code used in this chapter is as follows<?php
session_start();
Header("Content-type:image/PNG");
$im = imagecreate(60, 25);
$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, 9 + $i * 10, 5, $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()%60, rand()%25, $randcolor); //
}
imagepng($im);
imagedestroy($im);
?>We need to make a judgment on our HTML page before we log in. If we log in without entering our user name, password, and verification code, we need to prompt the user to enter relevant information before logging in, so that we You can use our JS (
JavaScript) to judge.
The JS code is as follows
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("请输入用户名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("请输入密码");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("请输入验证码");
myform.yzm.focus();
return false;
}
}
</script>Complete HTML page code
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("请输入用户名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("请输入密码");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("请输入验证码");
myform.yzm.focus();
return false;
}
}
</script>
<style type="text/css">
body{background-image: url("/images/1.jpg")}
.container{
width: 380px;
height: 330px;
margin: 0 auto;margin-top: 240px;
box-shadow: 0 0 20px #222;
border-radius:40px;
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative;
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="login.php" method="post" onsubmit="return foo();" name="myform" >
<div class="container"style="font-size:17px">
<div class="right">
<h2>用户登陆</h2>
<p>
用户名:<input type="text" name="name" id="name" placeholder="请输入用户名">
</p>
<p>
密　码:<input type="password" id="pwd" placeholder="请输入密码" >
</p>
<p>
验证码:<input type="text" name="yzm" id="yzm" id="yzm" placeholder="请输入验证码">
<img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
</p>
<p style=" margin-left: 200px"><a href="zhuce.html">注册</a></p>
<p>
<button class="button">立即登陆</button>
</p>
</div>
</div>
</form>
</body>
</html>Run Try the programIn this way, our HTML page is created. The next step is to submit it to our login.php page for the next step of processing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("请输入用户名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("请输入密码");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("请输入验证码");
myform.yzm.focus();
return false;
}
}
</script>
<style type="text/css">
body{background-image: url("https://img.php.cn/upload/course/000/000/006/5811779a6dae7451.jpg")}
.container{
width: 380px;
height: 330px;
margin: 0 auto;margin-top: 240px;
box-shadow: 0 0 20px #222;
border-radius:40px;
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative;
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="" method="post" onsubmit="return foo();" name="myform" >
<div class="container"style="font-size:17px">
<div class="right">
<h2>用户登陆</h2>
<p>
用户名:<input type="text" name="name" id="name" placeholder="请输入用户名">
</p>
<p>
密　码:<input type="password" name="pwd" id="pwd" placeholder="请输入密码" >
</p>
<p>
验证码:<input type="text" name="yzm" id="yzm" placeholder="请输入验证码">
<img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
</p>
<p style=" margin-left: 200px"><a href="zhuce.html">注册</a></p>
<p>
<button class="button">立即登陆</button>
</p>
</div>
</div>
</form>
</body>
</html>
