Halaman log masuk
Kod adalah seperti berikut:
<!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>Penjelasan kod:
Versi pertama borang menggunakan jadual untuk susun atur, dan versi ini menggunakan susun atur div
Atribut-atribut penambahan borang atribut pemegang tempat, menyediakan Mesej Gesaan yang boleh menerangkan nilai jangkaan medan input
Menambahkan kod pengesahan, diperkenalkan menggunakan teg <img> mengikat acara onclick, menyegarkan imej apabila mengklik pada imej, style= "cursor:pointer" ditetapkan untuk menukar anak panah tetikus kepada bentuk tangan yang kecil apabila tetikus bergerak ke imej kod pengesahan
Peristiwa semasa diserahkan dicetuskan apabila mengklik untuk log masuk, dan menentukan apa yang ada di dalam setiap <input> Jika ia tidak kosong, gerakkan kursor ke <input>, kemudian kembalikan false dan jangan lakukan operasi penyerahan
Medan tersembunyi ditambahkan untuk memproses halaman pertama halaman, jika ia tidak wujud, penyerahan tidak berjaya dan tiada penghakiman seterusnya diperlukan
Halaman pendaftaran
Kodnya adalah seperti berikut:
<!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>Penjelasan kod:
Versi pertama borang from menggunakan jadual untuk reka letak
Atribut borang menambah atribut pemegang tempat untuk memberikan maklumat Gesaan deskriptif untuk nilai jangkaan medan input
Tambahan kod pengesahan, diperkenalkan menggunakan teg <img> mengikat acara onclick, menyegarkan imej apabila imej diklik, style="cursor :pointer" adalah untuk menetapkan anak panah tetikus untuk berubah menjadi bentuk tangan kecil apabila tetikus bergerak ke kod pengesahan imej
Acara semasa hantar dicetuskan apabila mengklik untuk log masuk dan menentukan sama ada setiap <input>, jika kosong, gerakkan kursor ke <input>, kemudian kembali palsu, dan jangan lakukan operasi penyerahan
Medan tersembunyi ditambahkan untuk memproses lapisan pertama penghakiman pada halaman , jika ia tidak wujud, penyerahan tidak berjaya dan tiada penghakiman seterusnya diperlukan
