php用户注册登录系统之登录注册页面
登录页面
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陆</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("请输入用户名");
//将光标移动到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("请输入密码");
myform.userpwd.focus();
return false;
}
if (myform.code.value=="")
{
alert("请输入验证码");
myform.code.focus();
return false;
}
}
</script>
<style type="text/css">
.code{
width:80px;
}
.titl{
font-weight:bold;
font-size:20px;
position:relative;
left:50px;
}
.bd{
background-color:#f0f0f0;
width:230px;
}
</style>
</head>
<body>
<form action="logincheck.php" method="post" onsubmit="return init();" name="myform" >
<div class="bd">
<div class="titl">用户登录</div>
<div >
<span >用户名:</span>
<span><input type="text" name="username" id="username" placeholder="请输入用户名" /></span>
</div>
<div >
<span >密　码:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" ></span>
</div>
<div>
<span >验证码:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="请输入验证码"></span>
<span><img src="pic.php" onClick="this.src='pic.php?nocache='+Math.random()" style="cursor:pointer"></span>
</div>
<div >
<span><button class="button">立即登陆</button></span>
<span><a href="register.php">注册</a></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>代码解释：
from表单里面第一版采用了table进行布局，这一版采用了div布局
表单的属性增加了placeholder属性，提供可描述输入字段预期值的提示信息
增加了验证码，使用<img>标签引入，绑定了一个onclick事件，点击图片的时候刷新图片，style="cursor:pointer"是设定了鼠标移动到验证码图片时，鼠标箭头变小手形状
点击登录时onsubmit事件触发，判断每个<input>里面是不是为空，为空则将光标移动到该<input>，然后返回false，不执行提交操作
增加了一个隐藏域，用于处理页面的第一层判断，如果不存在的话，则提交不成功，不用进行后续判断了
注册页面
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("请输入用户名");
//将光标移动到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("请输入密码");
myform.userpwd.focus();
return false;
}
if (myform.confirm.value=="")
{
alert("请再输入一次密码");
myform.confirm.focus();
return false;
}
if (myform.code.value=="")
{
alert("请输入验证码");
myform.code.focus();
return false;
}
}
</script>
<style type="text/css">
.code{
width:80px;
}
.titl{
font-weight:bold;
font-size:20px;
position:relative;
left:50px;
}
.bd{
background-color:#f0f0f0;
width:230px;
}
</style>
</head>
<body>
<form action="regcheck.php" method="post" onsubmit="return init();" name="myform" >
<div class="bd">
<div class="titl">用户注册</div>
<div >
<span >用  户 名:</span>
<span><input type="text" name="username" id="username" placeholder="请输入用户名" /></span>
</div>
<div >
<span >密　　码:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" ></span>
</div>
<div >
<span >确认密码:</span>
<span><input type="password" name="confirm" id="confirm" placeholder="请再输入一次密码" ></span>
</div>
<div >
<span >验  证 码:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="请输入验证码"></span>
<span><img src="pic.php" onClick="this.src='pic.php?nocache='+Math.random()" style="cursor:pointer"></span>
</div>
<div >
<span><button class="button">立即注册</button></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>代码解释：
from表单里面第一版采用了table进行布局，这一版采用了div布局
表单的属性增加了placeholder属性，提供可描述输入字段预期值的提示信息
增加了验证码，使用<img>标签引入，绑定了一个onclick事件，点击图片的时候刷新图片，style="cursor:pointer"是设定了鼠标移动到验证码图片时，鼠标箭头变小手形状
点击登录时onsubmit事件触发，判断每个<input>里面是不是为空，为空则将光标移动到该<input>，然后返回false，不执行提交操作
增加了一个隐藏域，用于处理页面的第一层判断，如果不存在的话，则提交不成功，不用进行后续判断了
