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:
