PHPユーザー登録ログインシステムログイン登録ページ
ログインページ
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陸</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("請輸入用戶名");
//將光標(biāo)移動到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("請輸入密碼");
myform.userpwd.focus();
return false;
}
if (myform.code.value=="")
{
alert("請輸入驗(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="請輸入用戶名" /></span>
</div>
<div >
<span >密　碼:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="請輸入密碼" ></span>
</div>
<div>
<span >驗(yàn)證碼:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="請輸入驗(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">注冊</a></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>コードの説明:
フォームの最初のバージョンはレイアウトにテーブルを使用し、このバージョンはdivレイアウトを使用します
フォーム入力フィールドの期待値を説明できるプロンプト情報(bào)を提供するために、プレースホルダー屬性が屬性に追加されます。<img> タグを使用して導(dǎo)入され、onclick イベントがバインドされます。畫像がクリックされ、畫像が更新され、マウスが検証コード畫像に移動すると style= "cursor:pointer" が設(shè)定され、マウスの矢印が小さな手の形に変わります
クリックすると onsubmit イベントがトリガーされますログインして、各 <input> が空かどうかを判斷し、空の場合はカーソルを <input> に移動し、 false を返し、送信操作を?qū)g行しません。ページの第一レベルの判定を処理するためにフィールドが追加されます。このフィールドが存在しない場合、送信は失敗し、判定は不要です
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注冊</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("請輸入用戶名");
//將光標(biāo)移動到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("請輸入密碼");
myform.userpwd.focus();
return false;
}
if (myform.confirm.value=="")
{
alert("請?jiān)佥斎胍淮蚊艽a");
myform.confirm.focus();
return false;
}
if (myform.code.value=="")
{
alert("請輸入驗(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">用戶注冊</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 >確認(rèn)密碼:</span>
<span><input type="password" name="confirm" id="confirm" placeholder="請?jiān)佥斎胍淮蚊艽a" ></span>
</div>
<div >
<span >驗(yàn)  證 碼:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="請輸入驗(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>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>
からのフォームの最初のバージョンでは、レイアウトにテーブルが使用されます。このバージョンでは div レイアウトが使用されます
にプレースホルダー屬性が追加されます。入力フィールドの期待値を説明できるプロンプト情報(bào)を提供するフォーム屬性
検証コードが追加され、<img> タグを使用して導(dǎo)入され、onclick イベントにバインドされ、クリックすると畫像が更新されます。 image, style="cursor:pointer" は、マウスが検証コード畫像に移動すると設(shè)定され、マウスの矢印が小さな手の形に変わります
- ログインするためにクリックすると onsubmit イベントがトリガーされ、それぞれの < が決定されます。 input> が空の場合は、カーソルを <input> に移動し、送信操作を?qū)g行しません
- の最初の判定層を処理するための隠しフィールドが追加されます。ページが存在しない場合、送信は失敗し、その後の判斷を行う必要はありません
