php使用者註冊(cè)登入系統(tǒng)之登入註冊(cè)頁面
登入頁面
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陸</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("請(qǐng)輸入用戶名");
//將光標(biāo)移動(dòng)到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("請(qǐng)輸入密碼");
myform.userpwd.focus();
return false;
}
if (myform.code.value=="")
{
alert("請(qǐng)輸入驗(yàn)證碼");
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="請(qǐng)輸入用戶名" /></span>
</div>
<div >
<span >密　碼:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="請(qǐng)輸入密碼" ></span>
</div>
<div>
<span >驗(yàn)證碼:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="請(qǐng)輸入驗(yàn)證碼"></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">注冊(cè)</a></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>程式碼解釋：
from表單裡面第一版採(cǎi)用了table進(jìn)行佈局，這一版採(cǎi)用了div佈局
表單的屬性增加了placeholder屬性，提供可描述輸入欄位預(yù)期值的提示訊息
增加了驗(yàn)證碼，使用<img>標(biāo)籤引入，綁定了一個(gè)onclick事件，點(diǎn)擊圖片的時(shí)候刷新圖片，style= "cursor:pointer"是設(shè)定了滑鼠移動(dòng)到驗(yàn)證碼圖片時(shí)，滑鼠箭頭變小手形狀
點(diǎn)擊登入時(shí)onsubmit事件觸發(fā)，判斷每個(gè)<input>裡面是不是為空，為空則將遊標(biāo)移到該<input>，然後返回false，不執(zhí)行提交操作
增加了一個(gè)隱藏域，用於處理頁面的第一層判斷，如果不存在的話，則提交不成功，不用進(jìn)行後續(xù)判斷了
註冊(cè)頁面
#程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注冊(cè)</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("請(qǐng)輸入用戶名");
//將光標(biāo)移動(dòng)到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("請(qǐng)輸入密碼");
myform.userpwd.focus();
return false;
}
if (myform.confirm.value=="")
{
alert("請(qǐng)?jiān)佥斎胍淮蚊艽a");
myform.confirm.focus();
return false;
}
if (myform.code.value=="")
{
alert("請(qǐng)輸入驗(yàn)證碼");
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">用戶注冊(cè)</div>
<div >
<span >用  戶 名:</span>
<span><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名" /></span>
</div>
<div >
<span >密　　碼:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="請(qǐng)輸入密碼" ></span>
</div>
<div >
<span >確認(rèn)密碼:</span>
<span><input type="password" name="confirm" id="confirm" placeholder="請(qǐng)?jiān)佥斎胍淮蚊艽a" ></span>
</div>
<div >
<span >驗(yàn)  證 碼:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="請(qǐng)輸入驗(yàn)證碼"></span>
<span><img src="pic.php" onClick="this.src='pic.php?nocache='+Math.random()" style="cursor:pointer"></span>
</div>
<div >
<span><button class="button">立即注冊(cè)</button></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>程式碼解釋：
from表單裡面第一版採(cǎi)用了table進(jìn)行佈局，這一版採(cǎi)用了div佈局
表單的屬性增加了placeholder屬性，提供可描述輸入欄位預(yù)期值的提示訊息
增加了驗(yàn)證碼，使用<img>標(biāo)籤引入，綁定了一個(gè)onclick事件，點(diǎn)擊圖片的時(shí)候刷新圖片，style="cursor :pointer"是設(shè)定了滑鼠移到驗(yàn)證碼圖片時(shí)，滑鼠箭頭變小手形狀
點(diǎn)擊登入時(shí)onsubmit事件觸發(fā)，判斷每個(gè)<input>裡面是不是為空，為空則將遊標(biāo)移到該<input>，然後返回false，不執(zhí)行提交操作
增加了一個(gè)隱藏域，用於處理頁面的第一層判斷，如果不存在的話，則提交不成功，不用進(jìn)行後續(xù)判斷了
