Halaman log masuk pembangunan PHP Halaman HTML
Mari lihat gambar di bawah dahulu
Seperti yang anda lihat daripada gambar di atas, halaman log masuk kami menggunakan tiga medan input teg <input> Pautan pendaftaran<a>, butang log masuk sekarang<serta kod pengesahan membentuk halaman log masuk kami Namun, jika kami memerlukan halaman kami untuk kelihatan lebih baik, gaya css adalah amat diperlukan dalam bab ini >
<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>Kod pengesahan
Kod pengesahan yang digunakan dalam bab ini adalah seperti berikut<?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);
?>Kami perlu membuat pertimbangan pada halaman HTML kami sebelum kami log masuk. Jika kami log masuk tanpa memasukkan nama pengguna, kata laluan dan kod pengesahan kami, kami perlu menggesa pengguna memasukkan maklumat yang berkaitan sebelum melog masuk, supaya kami Anda boleh menggunakan JS (
JavaScript) untuk menilai,
Kod JS adalah seperti berikut
<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>Kod halaman HTML lengkap
log masuk.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>Jalankan Cuba program Dengan cara ini, halaman HTML kami dibuat Langkah seterusnya ialah menyerahkannya ke halaman log masuk.php kami untuk langkah pemprosesan seterusnya
<. 🎜>
<!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>
