PHP user registration login system login registration page
Login page
The code is as follows:
<!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>Code explanation:
The first version of the form uses table for layout, and this version uses div layout
The attributes of the form add the placeholder attribute, providing Prompt information that can describe the expected value of the input field
Added the verification code, introduced using the <img> tag, bound an onclick event, and refreshed the image when the image was clicked, style= "cursor:pointer" is set when the mouse moves to the verification code image, the mouse arrow changes into a small hand shape
The onsubmit event is triggered when clicking to log in, and determines what is inside each <input> If it is not empty, move the cursor to the <input>, then return false, and do not perform the submission operation
Added a hidden field to process the first page of the page Layer judgment, if it does not exist, the submission is unsuccessful and there is no need to make subsequent judgments
##Registration page
The code is as follows:
<!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>Code explanation:
- The first version of the form uses table for layout, and this version uses div layout
- The attributes of the form are added with the placeholder attribute to provide a descriptive Prompt information for the expected value of the input field
- Added the verification code, introduced using the <img> tag, bound an onclick event, and refreshed the image when the image was clicked, style="cursor :pointer" is to set the mouse arrow to change into a small hand shape when the mouse moves to the verification code image
- The onsubmit event is triggered when clicking to log in, and determines whether each <input> Empty. If it is empty, move the cursor to the <input>, then return false, and do not perform the submission operation.
- Added a hidden field to process the first layer of judgment on the page , if it does not exist, the submission is unsuccessful and there is no need to make subsequent judgments
