masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Halaman log masuk pembangunan PHP Halaman HTML

Mari lihat gambar di bawah dahulu

login.jpg

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>
         密&#12288码:<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


<. 🎜>

Meneruskan pembelajaran
||
<!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> 密&#12288码:<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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan