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("請(qǐng)輸入用戶名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("請(qǐng)輸入密碼");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("請(qǐng)輸入驗(yàn)證碼");
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("請(qǐng)輸入用戶名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("請(qǐng)輸入密碼");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("請(qǐng)輸入驗(yàn)證碼");
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="請(qǐng)輸入用戶名">
</p>
<p>
密　碼:<input type="password" id="pwd" placeholder="請(qǐng)輸入密碼" >
</p>
<p>
驗(yàn)證碼:<input type="text" name="yzm" id="yzm" id="yzm" placeholder="請(qǐng)輸入驗(yàn)證碼">
<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
