로그인 페이지
코드는 다음과 같습니다.
<!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양식의 첫 번째 버전은 레이아웃에 테이블을 사용하고, 이 버전은 div 레이아웃을 사용합니다.
양식 입력 필드의 예상 값을 설명할 수 있는 프롬프트 정보를 제공하기 위해 속성에 자리 표시자 속성이 추가됩니다.
인증 코드가 추가되고 <img> 태그를 사용하여 도입되며 onclick 이벤트가 바인딩됩니다. 이미지를 클릭하면 이미지가 새로고침되고, 인증코드 이미지에 마우스가 이동하면 style= "cursor:pointer"가 설정되고, 마우스 화살표가 작은 손 모양으로 변합니다
클릭하면 onsubmit 이벤트가 발생합니다. 로그인하고 각 <input>이 비어 있는지 확인합니다. 비어 있으면 커서를 <input>으로 이동한 다음 false를 반환하고 제출 작업을 수행하지 않습니다. 페이지의 1차 판단을 처리하기 위해 숨겨진 필드가 추가됩니다. 존재하지 않는 경우 제출이 실패하며 판단이 필요하지 않습니다.
코드는 다음과 같습니다.
<!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>
자리 표시자 속성이 추가됩니다. 입력 필드의 예상 값을 설명할 수 있는 프롬프트 정보를 제공하기 위해 양식 속성에 인증 코드가 추가되고 <img> 태그를 사용하여 도입되며 클릭 시 이미지가 새로 고쳐집니다. 이미지에서는 인증코드 이미지 위로 마우스를 이동하면 style="cursor:pointer"가 설정되어 있고, 마우스 화살표가 작은 손 모양으로 변합니다
onsubmit 이벤트는 로그인 클릭 시 발생하며, 각 항목을 결정합니다. <입력>이 비어 있으면 <입력>으로 커서를 이동한 다음 false를 반환하고
첫 번째 레이어를 처리하기 위해 숨겨진 필드가 추가됩니다. 해당 페이지에 판단이 없으면 제출이 실패한 것이므로 후속 판단을 할 필요가 없습니다
다음 섹션