登录页面php,PHP开发登录页面之HTML页面

我们先看下图

从上面的图可以看到，我们的登录页面运用了三个标签输入域，一个注册链接，一个立即登录按钮外加一个验证码，就构成了我们的登录页面，但是如果需要我们的页面更好看，css样式是不可少的，本章节的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;

}

验证码

本章节所运用的验证码代码如下所示<?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 

$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);

?>

我们需要在我们登录之前在我们的HTML页面做一个判断，如果我们的用户名，密码，验证码不输入就登录的话，我们要提示用户用户输入相关的信息才能登录，这样我们就可以用我们的JS(JavaScript)判断了，

JS代码如下

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;

}

}

完整的HTML页面代码

login.htmlhtml>

登陆界面

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;

}

}

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;

}

用户登陆

用户名:

密　码:

验证码:

         

注册

立即登陆

运行程序尝试一下

这样我们的HTML页面就做出来了，下一步就要提交到我们的 login.php 页面进行下一步处理了