登入頁面
程式碼如下:
<!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>
程式碼解釋:
from表單裡面第一版採用了table進行佈局,這一版採用了div佈局
表單的屬性增加了placeholder屬性,提供可描述輸入欄位預期值的提示訊息
增加了驗證碼,使用<img>標籤引入,綁定了一個onclick事件,點擊圖片的時候刷新圖片,style= "cursor:pointer"是設定了滑鼠移動到驗證碼圖片時,滑鼠箭頭變小手形狀
點擊登入時onsubmit事件觸發,判斷每個<input>裡面是不是為空,為空則將遊標移到該<input>,然後返回false,不執行提交操作
增加了一個隱藏域,用於處理頁面的第一層判斷,如果不存在的話,則提交不成功,不用進行後續判斷了
註冊頁面
#程式碼如下:
<!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>
程式碼解釋:
from表單裡面第一版採用了table進行佈局,這一版採用了div佈局
表單的屬性增加了placeholder屬性,提供可描述輸入欄位預期值的提示訊息
增加了驗證碼,使用<img>標籤引入,綁定了一個onclick事件,點擊圖片的時候刷新圖片,style="cursor :pointer"是設定了滑鼠移到驗證碼圖片時,滑鼠箭頭變小手形狀
點擊登入時onsubmit事件觸發,判斷每個<input>裡面是不是為空,為空則將遊標移到該<input>,然後返回false,不執行提交操作
增加了一個隱藏域,用於處理頁面的第一層判斷,如果不存在的話,則提交不成功,不用進行後續判斷了